CSS Inline-block

CSS Inline-block

The inline-block value allows elements to sit next to each other like inline elements, while still supporting width, height, padding, and margin like block elements.

It is often used for buttons, badges, and small layout components.

Inline vs Inline-block

Inline elements do not respect width and height, while inline-block elements do.

.inline {
  display: inline;
  width: 200px; /* ignored */
}

.inline-block {
  display: inline-block;
  width: 200px;
}

Inline-block Example

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

.box {
  display: inline-block;
  width: 120px;
  padding: 12px;
  margin-right: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

Whitespace Issue

Inline-block elements are affected by whitespace in the HTML markup.

<div class="box">One</div>
<div class="box">Two</div>

This space can be removed by:

• Removing whitespace in HTML
• Setting font-size: 0 on the parent
• Using comments between elements

Inline-block vs Float

• inline-block keeps elements in normal flow
• No need for clearfix
• Easier alignment for small components

Code Challenge

Goal: Create a row of cards using inline-block.

HTML:

<div class="cards">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>

Task:

• Align the cards horizontally
• Set equal widths
• Add spacing between cards
• Center text inside each card

Try a Solution:

.card {
  display: inline-block;
  width: 120px;
  padding: 12px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

What’s Next?

Next, you will learn different techniques for aligning elements in CSS.