What is the difference between inline, block, and inline-block elements?

Short answer

Block elements take up the full width available and start on a new line. Inline elements flow within text and only take up as much width as necessary. Inline-block elements sit inline but allow block-level properties like width and height.

How it works

• Block: <div>, <p>, <section> — respects width, height, margin, and padding fully.
• Inline: <span>, <a>, <strong> — ignores width and height; horizontal margin and padding apply, but vertical spacing does not affect line height.
• Inline-block: Combines inline flow with block-like box model properties, making it ideal for buttons or navigation items that need sizing but must sit side-by-side.

Example

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: steelblue;
  margin: 10px;
}

<span class="box">A</span>
<span class="box">B</span>
<span class="box">C</span>

Why it matters

Choosing the right display mode prevents unexpected layout shifts and spacing bugs. Modern layouts often prefer Flexbox or Grid, but understanding these fundamentals is essential for maintaining and debugging legacy code.