प्रत्येक घटकाचे एक डिफ़ॉल्ट display वर्तन असते जो लेआउटमध्ये ते कसे वाहते हे नियंत्रित करते।
<div>, <p>, <h1>, <section>, <ul>.<span>, <a>, <strong>, <em>.<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong> stays inline; the two <div>s below stack vertically -->
<div>Block one</div>
<div>Block two</div>
span { width: 200px; height: 50px; } /* ❌ ignored — span is inline */
एक इनलाइन घटक पर width/height सेट करने से कुछ नहीं होता। हल इसके display को बदलना है:
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
inline-block पाठ प्रवाह में बैठता है (एक दूसरे के बगल में) और चौड़ाई/ऊंचाई/मार्जिन को सम्मान देता है — नेविगेशन आइटम, बैज, या एक पंक्ति में रखे गए बटन के लिए परिपूर्ण।
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
डिफ़ॉल्ट display को समझना बताता है कि आपका <span> ऊंचाई क्यों नहीं लेगा, <div> क्यों स्टैक होते हैं, और कब inline-block, flex, या grid पर स्विच करें।
यह कि आप किसी भी लेआउट सिस्टम को लागू करने से पहले तत्व कैसे व्यवस्थित होते हैं, इसका आधार है।