ब्लॉक और इनलाइन तत्वों के बीच क्या अंतर है?

Question

Accepted Answer

हर तत्व का एक डिफ़ॉल्ट **display** व्यवहार होता है जो यह नियंत्रित करता है कि यह लेआउट में कैसे प्रवाहित होता है। - **ब्लॉक** तत्व एक **नई लाइन** पर शुरू होते हैं और **सभी उपलब्ध चौड़ाई** लेते हैं। वे width/height और सभी margins/paddings स्वीकार करते हैं। उदाहरण: `

`, `

`, `
`, `
`. - इनलाइन तत्व एक लाइन के भीतर प्रवाहित होते हैं, केवल अपनी सामग्री जितने चौड़े, और width/height और top/bottom margins को अनदेखा करते हैं। उदाहरण: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## यह क्यों महत्वपूर्ण है ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` एक इनलाइन तत्व पर `width`/`height` सेट करना कुछ नहीं करता। फिक्स इसकी display बदलना है: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — दोनों का सर्वश्रेष्ठ `inline-block` पाठ प्रवाह में (एक दूसरे के साथ) बैठता है और* width/height/margins को सम्मान देता है — नेविगेशन आइटम, बैज, या एक पंक्ति में रखे बटन के लिए बिल्कुल सही। ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## यह क्यों महत्वपूर्ण है डिफ़ॉल्ट display को समझना समझाता है कि आपका `` ऊंचाई क्यों नहीं लेगा, `
` क्यों स्टैक होते हैं, और कब `inline-block`, `flex`, या `grid` पर स्विच करना चाहिए। यह इसका आधार है कि किसी भी लेआउट सिस्टम को लागू करने से पहले तत्व कैसे व्यवस्थित होते हैं।