Inline-block

You will be able to use display: inline-block to create small boxes that sit in a line of text while still accepting width, height, padding, and margins.

What it is

An inline-block element is a box that behaves partly like text and partly like a block. It flows with surrounding inline content, but it can also be sized and padded like a block-level box.

Use it when you want a small visual container inside a sentence, such as a badge, chip, button, or icon box.

• inline: flows with text, but ignores width and height.
• block: accepts width and height, but starts a new line.
• inline-block: flows with text and accepts width and height.
• vertical-align: controls how the box aligns with nearby text.

Why it matters

• It lets you create compact UI pieces such as tags, badges, and buttons.
• It keeps small boxes inside normal text flow instead of forcing line breaks.
• It allows padding, borders, and backgrounds to be applied to inline-looking elements.
• It is useful for simple layouts before reaching for flexbox or grid.
• It helps align icons, labels, and short text blocks on the same line.

Syntax or steps

.chip {
  display: inline-block;
  padding: 4px 10px;
  vertical-align: middle;
}

1. Choose an element that should sit beside text, such as a span or a.
2. Set display: inline-block.
3. Add size, padding, border, or background as needed.
4. Use vertical-align if the box looks too high or too low.

Example

<style>
.chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #99a;
  border-radius: 999px;
  background: #f7f7ff;
  vertical-align: middle;
}
</style>

<p>
  Status:
  <span class="chip">Active</span>
  <span class="chip">Pending</span>
</p>

• display: inline-block makes each chip behave like a small box inside the paragraph.
• padding creates space inside the chip without forcing a line break.
• border-radius gives the chip a rounded badge shape.
• vertical-align: middle helps the chips line up more naturally with the text.

Common mistakes

• Unexpected gaps between boxes. Inline-block elements are separated by whitespace in the HTML, just like words. Fix it by removing whitespace, setting the parent to font-size: 0 and restoring font size on children, or using flexbox.
• Boxes sit too high or too low. The default alignment is often baseline. Fix it with vertical-align: middle, top, or bottom.
• Trying to size a plain inline element. A normal span ignores width and height. Fix it by adding display: inline-block.
• Using inline-block for complex layout. It is good for small boxes, but not ideal for full page structure. Fix it by using flexbox or grid when alignment becomes difficult.

When to use it

Use inline-block when you need a small box that stays in the text flow. Compare it with nearby display values:

Practice

Guided exercise: Create a .tag class that uses display: inline-block, adds padding, gives it a background color, and sets vertical-align: middle. Place two tags inside a paragraph.

Challenge: Make three chips with fixed width and height, then remove the gaps between them.

Expected output or hint: The chips should appear on the same line as the text. To remove gaps, try setting the parent paragraph to font-size: 0 and restoring font size on the chips, or switch the parent to display: flex.

Quick check

Question: Why does width: 100px usually fail on a plain span?

Answer: Because a normal span is inline, and inline boxes ignore width and height. Adding display: inline-block lets it accept size while still flowing with text.

Summary

inline-block is the middle ground between inline and block. It keeps elements in the text flow while allowing them to be sized, padded, and styled as boxes.

Use it for small components like badges, chips, and buttons, and switch to flexbox or grid when the layout becomes more complex.