ప్రతి మూలకానికి లేআউట్లో ఎలా ప్రవహిస్తుందో నియంత్రించే 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 సెట్ చేయడం ఏమీ చేయదు. ఫిక్స్ దాని డిస్ప్లే మార్చడం:
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
డిఫాల్ట్ ప్రదర్శనను అర్థం చేసుకోవడం ఎందుకు మీ <span> ఎత్తిని తీసుకోలేదు, ఎందుకు <div>లు సంచితమవుతాయి, మరియు inline-block, flex లేదా gridకు ఎప్పుడు మారాలో వివరిస్తుంది.
ఇది మీరు ఏదైనా లేআউట్ సిస్టమ్ను వర్తింపజేయడానికి ముందు మూలకాలు ఎలా ఏర్పాటు చేయబడతాయో యొక్క ఆధారం.