juniorCSS
Difference between inline, block, and inline-block?
Updated Apr 28, 2026
Short answer
Block elements take up the full width, inline elements take only necessary width and ignore top/bottom margins, and inline-block allows setting dimensions while flowing inline.
Deep explanation
A block element forces a line break before and after it. An inline element allows other elements to sit to its left and right, but ignores width, height, and vertical margins/padding. inline-block provides the best of both: it flows inline like text but respects explicit width, height, and vertical spacing.
Real-world example
Creating a horizontal navigation menu where list items sit side-by-side but need specific padding and heights.
Common mistakes
- Trying to set a `width` or `margin-top` on a standard `<span>` without changing its display property.
Follow-up questions
- What is the default display value of a <div>?