हर तत्व का एक डिफ़ॉल्ट 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 पाठ प्रवाह में (एक दूसरे के साथ) बैठता है और width/height/margins को सम्मान देता है — नेविगेशन आइटम, बैज, या एक पंक्ति में रखे बटन के लिए बिल्कुल सही।
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 पर स्विच करना चाहिए।
यह इसका आधार है कि किसी भी लेआउट सिस्टम को लागू करने से पहले तत्व कैसे व्यवस्थित होते हैं।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें