The difference between `inline`, and `inline-block`

Inline

This difference between inline and inline-block always used to confuse me.

With inline:

  • you cannot set height or width.
  • top and bottom margins / paddings will overlap into other elements.
  • horizontal margins / padding will be respected.
<!-- html -->
<div>
 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
</div>

<div>
  Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty,   
  <span> span </span>
  and dedicated to the proposition that all men are created equal.
</div>

<div>
 Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
</div>


/*css*/
div {
  display: block;
}

span {
  display: inline;
  height: 400px; /* height doesn't change outcome*/
  width: 400px;  /* width doesn't change outcome */
  border: 5px solid red;  
  padding: 20px; /* top and bottom padding overlaps other elements */
}

See the Pen inline experiment by Ben Koshy (@Ben-Koshy-the-animator) on CodePen.

Inline block

  • inline-block is the same as inline, but top and bottom padding and margins are respected.
  • inline-block doesn’t go to a new line, like block does.

Use it when you need top and bottom margins to work.

<!-- html -->
<div> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
</div>

<div>
  Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty,   
  <span> span </span>
  and dedicated to the proposition that all men are created equal.
</div>

<div>
 Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
</div>


/*css*/
div {
  display: block;
}

span {
  display: inline-block;
  height: 400px; /* height doesn't change outcome*/
  width: 400px;  /* width doesn't change outcome */
  border: 5px solid red;  
  padding: 20px; /* top and bottom padding overlaps other elements */
}

Or experiment with it here:

See the Pen ineline-block by Ben Koshy (@Ben-Koshy-the-animator) on CodePen.

Written on January 3, 2025