Display property

Basic display values

Block

The display: block value causes an element occupy the whole available width of its parent. Elements with display: block are placed one after the other, from top to bottom. Some HTML tags with default block display value:

<main>
  <h1>Main title</h1>
  <div>
    <h2>Subtitle</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p>This is a third paragraph.</p>
  </div>
  <div>
    <h2>Subtitle</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p>This is a third paragraph.</p>
  </div>
</main>

* {background-color: #0c02;}
main {outline: solid 1px red;}
div {outline: solid 1px blue;}
p {outline: solid 1px #0ff;}

→

Main title

Subtitle

This is a paragraph.

This is another paragraph.

This is a third paragraph.

Subtitle

This is a paragraph.

This is another paragraph.

This is a third paragraph.

Inline

The display: inline value causes an element to occupy the width of its content. Elements with display: inline are placed next to each other, from left to right and jump to a new line if there is not enough space. Almost every inline elements are not affected by the width, height, margin-top and margin-bottom properties. Some HTML tags with default inline display value:


<a>
 & 
 & 

 & 
<img>
<button>

<p>
  <span>This is a span.</span>
  <span>This is a longer span</span>
  <a href="">followed by a link.</a> 
  and a button: 
  <button>Click me</button>
</p>

p * {outline: solid 1px #0ff;}

→

This is a span. This is a longer span followed by a link. and a buttons:

Inline-block

The display: inline-block behaves just like the display: inline value, but with the difference that the element can have a width, height, padding, and marign.

<p>
  <span>This is a span.</span>
  <span class="inline-block">This is an inline-block span.</span>
  <span>Followed by a normal inline span.</span>
</p>

p * {outline: solid 1px #0ff;}

.inline-block {display: inline-block;}

span {
  height: 2rem; 
  background-color: #eff; 
}

→

This is a span. This is an inline-block span.Followed by a normal inline span.