CSS Display: Block and Inline

Every element has a display value that decides how it behaves in the layout. The two you will meet first are block and inline.

Block

A block element starts on a new line and takes up the full width available. div, p, h1 to h6, ul and section are blocks by default. You can set width, height, margin and padding on them freely.

Inline

An inline element sits inside a line of text and is only as wide as its content. span, a, strong and em are inline. Width and height are ignored, and vertical margins do not push anything away.

1
2
3
4
5
6
7
8

<style>
  div, span { border: 2px solid #d94a00; padding: 6px; margin: 4px; }
  .w { width: 150px; height: 40px; }
</style>
<div class="w">div (block)</div>
<div class="w">div (block)</div>
<span class="w">span (inline)</span>
<span class="w">span (inline)</span>

The two divs stack, and each is 150px wide. The two spans sit side by side, and the width and height have no effect.

Switching with CSS

display can change an element’s behaviour.

1
2
3
4
5
6
7

<style>
  .menu a { display: block; padding: 8px 12px; background: #fdf2e9; margin-bottom: 4px; text-decoration: none; color: #1c1b1f; }
  .tags li { display: inline; margin-right: 8px; background: #d0e8f2; padding: 3px 8px; }
  .tags { list-style: none; padding: 0; }
</style>
<div class="menu"><a href="#">Home</a><a href="#">Shop</a></div>
<ul class="tags"><li>fiction</li><li>poetry</li><li>travel</li></ul>

Links made block fill the row and have a big clickable area. List items made inline flow like words.

What about Flexbox and Grid?

They are display values too: display: flex and display: grid. They have their own chapters later: Flexbox and Grid.