CSS display: inline-block

display: inline-block combines the best of both worlds:

• like inline, the element sits in the line and can share it with others;
• like block, it respects width, height, padding and margin on all sides.

1
2
3
4
5
6

<style>
  .box { display: inline-block; width: 110px; height: 70px; padding: 8px; margin: 4px; background: #d0e8f2; border: 1px solid #1a5276; }
</style>
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>

Three divs that would normally stack are now in a row, with sizes.

Good uses

• Buttons and badges made from links or spans (see Link Buttons).
• Simple rows of cards or tags for small cases.

The gap you did not ask for

Run the example above and notice a small gap between the boxes you did not add. It is the whitespace between the tags in the HTML, which is treated like a space between words. You can:

• remove the whitespace in the HTML (ugly),
• set font-size: 0 on the parent (affects text inside),
• or, better, use flexbox, where the gap does not exist and gap gives you precise control.

inline-block vs flex

For layout, flexbox replaced most inline-block uses. Keep inline-block for things that behave like words in a sentence, such as buttons inside a paragraph.