← Back to Chapters

CSS Display: inline-block

? CSS Display: inline-block

⚡ Quick Overview

The inline-block value lets elements sit in one line like inline, but still allows you to set width and height like a block element. It’s great for simple horizontal layouts such as buttons, cards, or navbar items.

? Key Concepts

  • Inline-like flow: Elements sit next to each other on the same line if space is available.
  • Block-like sizing: You can set width, height, padding, and margin normally.
  • Respects line breaks: If there’s not enough horizontal space, elements wrap to the next line.
  • Whitespace gaps: Spaces/newlines in HTML between inline-block elements create small gaps.
  • Good for UI items: Perfect for menu items, tags, badges, or small cards in a row.

? Syntax & Theory

To use inline-block, apply it to an element with the display property:

? View Code Example 
/* Make boxes line up horizontally but keep block sizing */
.box {
  display: inline-block;
  width: 120px;
  height: 100px;
  background-color: #007bff;
  color: #ffffff;
  text-align: center;
  line-height: 100px;
  margin: 10px;
}

Here, each .box behaves like a block (fixed size, padding, margin), but because of display: inline-block;, multiple boxes can sit on the same line.

? Complete Example: Inline Boxes in a Row

This example shows three boxes aligned horizontally using inline-block.

? View Code Example 
<!-- HTML + CSS inline-block demo -->
<style>
  .inline-box {
    display: inline-block;
    width: 120px;
    height: 80px;
    background-color: #2563eb;
    color: #ffffff;
    text-align: center;
    line-height: 80px;
    margin: 6px;
    border-radius: 8px;
  }
</style>

<div class="inline-box">Box 1</div>
<div class="inline-box">Box 2</div>
<div class="inline-box">Box 3</div>

?️ Live Output & Explanation

? Live Output: Inline Boxes

Box 1
Box 2
Box 3

All three boxes appear on the same line (like inline elements), but each keeps its own width and height (like block elements). If you shrink the window, they will wrap onto the next line when there isn’t enough space.

✅ Best Practices

  • Use inline-block for simple horizontal layouts like buttons, tags, or small cards.
  • Watch out for whitespace gaps between elements in the HTML (they create small spaces).
  • You can remove gaps by:
    • Putting closing and opening tags on the same line, or
    • Commenting out the newline between elements.
  • Align text inside the box using text-align: center; and vertical alignment with line-height or flexbox.
  • For complex grid-like layouts, modern CSS layout tools like flexbox or grid are usually easier to manage.

? Practice Tasks

  1. Create 3 boxes using inline-block and try changing their width and height. Observe how they stay on the same line.
  2. Add text-align: center; to the parent container and see how the inline-block boxes are centered.
  3. Add 5–6 inline-block boxes with different background colors to create a simple “card” layout.
  4. Experiment by replacing display: inline-block; with display: block; and display: inline; to see the difference.