The Complete CSS Display Inline Interactive Tutorial

CSS Display Inline

display: inline is the “text-like” display mode in CSS. Inline elements live inside a line of text, wrap with it, and generally behave like they’re part of the sentence rather than a standalone box. That sounds simple… until you try to set a width, add padding, or vertically align a tiny badge and wonder why CSS is being “dramatic.”

In this tutorial, we’ll make inline elements behave on purpose (instead of by accident), using interactive playgrounds you can click through.

CSS display inline meaning

An element with display: inline participates in the inline formatting context. In normal flow, that means:

• It sits in the same line as surrounding text (unless it wraps to the next line).
• Its size is mostly determined by its content (text length, inline content).
• It does not start on a new line by default (unlike block elements).
• It can wrap across lines when the container is too narrow.

.demo {
  display: inline;
}

.demo {
  display: inline;
  background: #ffe08a;
}

.demo {
  display: inline;
  border: 2px solid #111;
}

.demo {
  display: inline;
  background: #ffe08a;
  border: 2px solid #111;
  padding: 2px 6px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 410px;
  resize: horizontal;
  overflow: hidden;
}

p {
  margin: 0;
  line-height: 1.6;
}

  

    This is a sentence with an
    inline span
    inside it. Resize the preview narrower to see it wrap naturally.
  

Notice how the inline span doesn’t break the paragraph into separate “rows.” It behaves like part of the text line. With snippet 4 active, try increasing the padding and watch how it affects the line height and spacing. That’s inline layout in action: it’s designed around text flow, not box dimensions.

CSS display inline vs block

The easiest mental model:

• inline = “text-ish” (flows within a line, wraps, doesn’t start a new line)
• block = “section-ish” (starts a new line, takes available width by default)

A block element typically stretches to fill the line (unless you constrain it), while inline elements take only as much width as their content needs.

.demo {
  display: inline;
  background: #d9f2ff;
  border: 2px solid #111;
}

.demo {
  display: block;
  background: #d9f2ff;
  border: 2px solid #111;
}

.demo {
  display: block;
  width: 180px;
  background: #d9f2ff;
  border: 2px solid #111;
}

.demo {
  display: inline;
  width: 180px;
  background: #d9f2ff;
  border: 2px solid #111;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 460px;
  resize: horizontal;
  overflow: hidden;
}

p {
  margin: 0;
  line-height: 1.7;
}

  

    Before
    the demo element
    after.
  

Pay attention to that last snippet: applying width to an inline element usually does nothing visible. That’s not a bug—inline formatting just doesn’t use width the same way.

Learn more about display: block in the CSS Display Block Interactive Tutorial.

CSS display inline vs inline-block

inline-block is the “best of both worlds” option:

• It flows inline (sits in a line, doesn’t force a newline)
• But it’s still a box that respects width and height

If you want something to sit in a sentence like text, but still behave like a box (size, padding, etc.), inline-block is usually your move.

.demo {
  display: inline;
  width: 200px;
  height: 48px;
  background: #e8ffd8;
  border: 2px solid #111;
}

.demo {
  display: inline-block;
  width: 200px;
  height: 48px;
  background: #e8ffd8;
  border: 2px solid #111;
}

.demo {
  display: inline-block;
  width: 200px;
  height: 48px;
  background: #e8ffd8;
  border: 2px solid #111;
  vertical-align: middle;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 520px;
}

p {
  margin: 0;
  line-height: 1.8;
}

  

    Text before
    inline-ish box
    text after.
  

That third snippet sneaks in vertical-align, because when you use inline-block, vertical alignment becomes a common “why is it slightly off?” moment.

Learn more about display: inline-block in the CSS Display Inline-Block Interactive Tutorial.

CSS display inline width

This is the classic beginner surprise: inline elements ignore width and height in the way you expect boxes to use them.

• If an element is truly inline, its width is basically “whatever my text needs.”
• width and height don’t define the box the same way as for block/inline-block.
• To control dimensions, switch to display: inline-block (or block).

.badge {
  display: inline;
  width: 220px;
  height: 50px;
  background: #ffd9f2;
  border: 2px solid #111;
}

.badge {
  display: inline-block;
  width: 220px;
  height: 50px;
  background: #ffd9f2;
  border: 2px solid #111;
}

.badge {
  display: inline-block;
  width: 220px;
  height: 50px;
  background: #ffd9f2;
  border: 2px solid #111;
  padding: 8px 12px;
  border-radius: 999px;
  text-align: center;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 560px;
}

p {
  margin: 0;
  line-height: 1.9;
}

.badge {
  font-weight: 700;
}

  

    Here is a
    STATUS
    badge inside a sentence.
  

If your goal is “a pill that sits inline,” inline-block is usually the cleanest answer.

CSS display inline padding

Inline elements can have padding, but it comes with a quirk:

• Left/right padding behaves pretty naturally.
• Top/bottom padding can visually “push” into the lines above/below, because inline layout is based on line boxes and baselines.

It’s not that padding is “forbidden” on inline elements—it’s that inline layout isn’t designed around tall boxes.

.mark {
  display: inline;
  padding: 0 10px;
  background: #fff2b8;
}

.mark {
  display: inline;
  padding: 10px 10px;
  background: #fff2b8;
}

.mark {
  display: inline-block;
  padding: 10px 10px;
  background: #fff2b8;
}

.mark {
  display: inline-block;
  padding: 10px 10px;
  background: #fff2b8;
  vertical-align: middle;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 520px;
}

p {
  margin: 0;
  line-height: 1.6;
}

  

    This is a paragraph with a
    highlighted phrase
    in the middle of it. Try the snippets and watch the line spacing.
  

A good rule: if you want a “chunky” inline thing (padding, background, border), use inline-block so it behaves like a real box.

Inline margins and line breaks

Margins on inline elements have another “mostly yes, sometimes no” vibe:

• margin-left and margin-right work as you expect.
• margin-top and margin-bottom usually won’t affect surrounding lines the way a block element’s vertical margins do.

.tag {
  display: inline;
  margin: 0 12px;
  background: #d9f2ff;
  border: 2px solid #111;
  padding: 2px 6px;
}

.tag {
  display: inline;
  margin: 12px 12px;
  background: #d9f2ff;
  border: 2px solid #111;
  padding: 2px 6px;
}

.tag {
  display: inline-block;
  margin: 12px 12px;
  background: #d9f2ff;
  border: 2px solid #111;
  padding: 2px 6px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 540px;
}

p {
  margin: 0;
  line-height: 1.8;
}

  

    Text
    TAG
    text
    TAG
    text.
  

If you’re trying to create spacing between “inline boxes,” inline-block gives you more predictable vertical behavior.

Baseline and vertical-align

Inline elements (and inline-block elements) align to the baseline by default. That’s why badges, icons, and little pill elements often look slightly too low.

The most common fixes:

• vertical-align: middle; aligns the element roughly to the middle of the line box.
• vertical-align: top; or bottom can also help depending on the design.

.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #111;
}

.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #111;
  vertical-align: middle;
}

.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #111;
  vertical-align: text-top;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 520px;
}

p {
  margin: 0;
  line-height: 1.8;
}

  

    
    Inline icon next to text.
  

If you’ve ever nudged an icon with position: relative; top: 1px;… yes, you’re not alone. But try vertical-align first.

Practical pattern: an inline badge that behaves

Let’s build a tiny badge inside text. We’ll keep it inline-ish, but still a proper box with padding and consistent alignment.

.badge {
  display: inline;
  padding: 6px 10px;
  border: 2px solid #111;
  background: #e8ffd8;
  border-radius: 999px;
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid #111;
  background: #e8ffd8;
  border-radius: 999px;
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid #111;
  background: #e8ffd8;
  border-radius: 999px;
  font-weight: 700;
  vertical-align: middle;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 560px;
}

p {
  margin: 0;
  line-height: 1.9;
}

  

    Your subscription is
    ACTIVE
    and will renew next month.
  

The “winning” version is usually inline-block plus a sensible vertical-align.

Inline links, padding, and click targets

Links (<a>) are inline by default. You can add padding to make them easier to click, but remember: large vertical padding on inline can feel odd in tight lines.

A common pattern is: keep the link in the flow, but use inline-block for predictable padding and hover backgrounds.

a {
  display: inline;
  padding: 8px 10px;
  background: #ffd9f2;
  color: #111;
  text-decoration: none;
}

a {
  display: inline-block;
  padding: 8px 10px;
  background: #ffd9f2;
  color: #111;
  text-decoration: none;
}

a {
  display: inline-block;
  padding: 8px 10px;
  background: #ffd9f2;
  color: #111;
  text-decoration: none;
  border: 2px solid #111;
  border-radius: 10px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 2px dashed #aaa;
  padding: 12px;
  max-width: 620px;
}

p {
  margin: 0;
  line-height: 1.8;
}

  

    Read the
    documentation
    for details, then come back here.
  

If you want “link that looks like a button,” inline-block is usually the calmer, more predictable choice.

Learn more about link styling in the CSS Link Interactive Tutorial.

display: inline gotchas and debugging checklist

• “My width doesn’t work.” Expected. Inline elements don’t size from width/height the same way. Use inline-block or block.
• “My vertical padding looks weird.” Inline layout uses baselines and line boxes. Try inline-block, adjust line-height, or add vertical-align.
• “My badge/icon sits too low.” That’s baseline alignment. Use vertical-align: middle; (or text-top, top, etc.).
• “There’s a tiny gap under my inline-block.” Inline-block aligns like text, so descenders and line-height can create extra space. Try vertical-align: middle; or adjust line-height on the container.
• “I need spacing around inline things.” Horizontal margins work great. For vertical spacing and consistent box behavior, switch to inline-block.

Quick reference: inline vs block vs inline-block

• inline
  • Stays in the line of text
  • Wraps naturally
  • Width/height generally not used for sizing
  • Padding works, but vertical padding can behave unexpectedly
• block
  • Starts on a new line
  • Often fills available width by default
  • Width/height work as you expect
• inline-block
  • Stays inline like text
  • Acts like a box (width/height/padding behave predictably)
  • Often needs vertical-align tweaks

Wrap-up: when to use display: inline

Use display: inline when you truly want “text-like” behavior: something that flows with the sentence and wraps naturally, like emphasizing a word, styling a small piece of text, or keeping markup semantically inline.

Use display: inline-block when you want an inline thing that behaves like a real box: badges, pills, icons, padded links, and anything that needs reliable sizing.

And if your inline element is fighting you… it’s probably not you. It’s just inline being inline.