Block vs Inline Elements

Every HTML element has a default display behavior. The most common are block and inline.

  • Block-level elements: start on a new line and span the full available width by default. You can set width, height, all margins and paddings.
  • Inline elements: do not start on a new line; they sit inside a line of text. width/height don’t apply (content decides). Vertical margins are ignored.

1) Common Elements


<!-- Block-level (by default) -->
<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer>, <table>

<!-- Inline (by default) -->
<span>, <a>, <strong>, <em>, <img>, <code>, <label>, <button>

2) Visual Difference


<!-- Block elements stack vertically and take full width -->
<div>Block A</div>
<div>Block B</div>

<!-- Inline elements sit next to each other -->
<span>Inline 1</span>
<span>Inline 2</span>
<a>Link</a>
Block A
Block B

This is a paragraph (block).

Text with Inline 1 Inline 2 Link around it.

3) Width/Height Behavior


<!-- Block: width/height work -->
<div style="width:200px; height:60px;">Block sized</div>

<!-- Inline: width/height ignored -->
<span style="width:200px; height:60px;">Inline sized?</span>
Block sized (200×60)
Inline ignores width/height

4) Change Display with CSS


<!-- Make inline behave like block -->
<span style="display:block">Now block</span>

<!-- Make block behave inline -->
<div style="display:inline">Now inline</div>

<!-- inline-block: sits inline, but accepts width/height -->
<span style="display:inline-block; width:120px; height:40px;">Inline-block</span>
Span as block
Div as inline
inline-block inline-block width only

Tips:

  • Use block for structural layout (sections, cards, rows).
  • Use inline for styling parts of text (<strong>, <em>, <a>).
  • inline-block is great for badges, buttons, and small layout items that need width/height.
  • Modern layout often uses display:flex or display:grid for complex structures.