Q4: How do display: block, inline, and inline-block differ?
block: Starts on a new line, expands to fill 100% container width, and respects width/height.inline: Flows within text, occupies required content width, and ignores top/bottom margins and width/height.inline-block: Flows inline like text, but honors explicit width, height, padding, and margins.
Inline-Block Display Mode
.badge {
display: inline-block;
width: 80px;
height: 24px;
padding: 4px;
}💡 inline-block keeps items inline with surrounding text while respecting explicit width and height.
Key Takeaways
inlineelements ignore vertical margins and explicit width/height dimensions.inline-blockflows side-by-side while preserving explicit dimension control.
Knowledge Check
Which display value allows setting explicit width and height while flowing elements inline on the same line?