Difference between inline and inline-block

As I was working on a side project, the same one where I was using buttons I saw examples using display: inline-block used in the button styles.

Why should I use inline-block instead of inline styles? What difference does it make?

Difference between inline-block and inline

display: inline-block respect top and bottom margins & paddings. display: inline, doesn’t.

In the example below, we use both inline and inline-block elements in the same paragraph to illustrate the process.

<p>Cheese and wine ricotta danish fontina.
Brie cheesy grin paneer squirty cheese taleggio
cheesecake <span class="inline-block-box">goat
taleggio</span> <span class="inline-box">goat
taleggio</span>. Bavarian
bergkase emmental fromage cheesecake
cheese slices cheesy grin queso caerphilly.</p>

The styles for the span elements are identical except for the display attribute.

Again, the difference is that inline-block will honor dimensions and padding but inline will not.

span.inline-block-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 1em;
  background-color: rebeccapurple;
  color: white;
}

span.inline-box {
  display: inline;
  width: 100px;
  height: 100px;
  padding: 1em;
  background-color: rebeccapurple;
  color: white;
}

You can see multiple examples using the styles described above in Codepen: https://codepen.io/caraya/pen/wvvpEQo

The first example uses inline-block for two span elements.

The second example uses inline for both span elements

The last example combines the two. It uses inline-block for the first span and inline for the second.

Why would we use inline-block?

There may be times when we want to style inline elements with attributes that will only work with inline-block elements.