inline vs block vs inline-block in CSS
A common CSS interview question about the display property and how elements flow.
The difference
block starts on a new line and takes full width (div, p, section) — width/height and all margins apply. inline flows within text (span, a, strong) — it ignores width/height and vertical margins. inline-block flows inline but respects width/height and margins.
When each is used
Use block for structural containers, inline for text-level elements, and inline-block when you want elements to sit in a line but still have box dimensions. For layout, though, prefer Flexbox or Grid over inline-block hacks.
Master the box model & layout
display, the box model, Flexbox and Grid — with clear explanations in the Complete Frontend Kit's HTML & CSS Handbook.
⚡ Get the Complete Frontend Kit → ₹499Frequently asked questions
- Why can't I set width on an inline element?
- Inline elements flow with text and ignore width/height and vertical margins. Use inline-block or block if you need box dimensions.
- Is inline-block still used for layout?
- Rarely — Flexbox and Grid have replaced inline-block layout hacks. inline-block is fine for small in-line boxes.