प्रत्येक एलिमेन्टको एक डिफल्ट 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 पाठ प्रवाहमा बैठ्छ (एकै पंक्तिमा) र चौडाइ/उचाइ/मार्जिन सम्मान गर्छ — nav आइटेमहरू, ब्याजहरू, वा पंक्तिमा व्यवस्थित बटनहरूको लागि उत्तम।
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
डिफल्ट display बुझ्नु तपाईंको <span> किन उचाइ लिँदैन, <div>s किन स्ट्याक हुन्छन्, र कहिले inline-block, flex, वा grid मा स्विच गर्ने भनेर व्याख्या गर्छ।
यो तपाईंले कुनै पनि लेआउट प्रणाली लागू गर्नु अघि एलिमेन्टहरू कसरी व्यवस्थित हुन्छन् भन्नेको आधार हो।