Loading...

CSS Inline-block

The last lesson mapped the everyday display values. This one drills the hybrid: inline-block. You want neighbors on one line when space allows — like text — but you also want a real box that obeys width, height, and padding. That is the job.

Side-by-side comparison

📊 Inline vs inline-block vs block

Mode Line behavior Width / height / padding
inline Sits in the text line Width/height usually ignored; padding can look odd
inline-block Sits in the line when room remains Width, height, and padding work like a box
block Starts on its own line Full box model; often stretches to fill the row

Pick inline-block when the element should share a row with siblings yet still need measurable size — chips, tags, icon labels, compact toolbar buttons. Leave full-page columns and complex alignment for Flexbox and Grid later.

A sized chip that still shares the line

Unlike pure inline, a chip can keep padding and a fixed width while sitting beside other chips.

Sized chip

css 
.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}

A simple toolbar row

Several equal-width controls can sit in one row. Margins separate them. This is enough for a calm toolbar before Flexbox arrives.

Inline-block toolbar

css 
.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}

Vertical alignment inside the line

Inline-level boxes can sit at different heights next to text or images. vertical-align nudges them — middle is a common calm choice for icon+label pairs.

Align with text

css 
.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}

.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}

The whitespace gap gotcha

Browsers treat spaces and newlines between tags as text nodes. Between two inline-block siblings, that tiny space becomes a visible gap. It is not Flexbox gap — it is leftover HTML whitespace.

See the gap

css 
/* HTML like:
<span class="tile">A</span>
<span class="tile">B</span>
leaves a gap from the newline. */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}

Ways to calm the gap: put tags on one line with no space, comment out the newline, or set a tiny negative margin with care. Later, Flexbox gives cleaner spacing — do not force every row through inline-block forever.

A calm inline-block habit

Use a shared class for row items. Size them on purpose. Fix whitespace only when the gap hurts. Do not rebuild entire page layouts with nested inline-blocks — that is how float-era pain returns. Position and float wait for their own lessons.

Shared item class

css 
.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}

Try it yourself

  1. Build three .chip elements with inline-block, fixed width, and padding — watch them share a line.
  2. Make a four-button .tool toolbar with equal widths and margin-right.
  3. Place a small .icon beside a .label and try vertical-align: middle.
  4. Put two .tile siblings on separate HTML lines, then on one line — compare the gap.
  5. Write one sentence: when is inline-block enough, and when will you wait for Flexbox?

Common mistakes

  • Expecting pure inline elements to honor width / height the same way
  • Blaming CSS for a “mystery gap” that is really HTML whitespace between tags
  • Using inline-block to invent a whole multi-column page layout
  • Treating this lesson like the broad display survey (block / none) from last time
  • Jumping into position or float recipes here instead of mastering the hybrid

Summary

  • inline-block sits in a line like text but keeps a real box model for size and padding
  • Ideal for chips, compact toolbars, and icon+label pairs
  • vertical-align helps line up neighbors of different heights
  • Whitespace between tags can create a visible gap — know the cause
  • For complex rows and clean gaps, Flexbox comes later; keep inline-block intentional

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 36 of 36
Css Tutorial