Syllabus

On this page

Display & Inline-block

Badar KhalilUpdated September 30, 2026 7 min read

CSS Display Property and Inline-block: Complete Guide

Focus keyword: CSS display property. The display property is the most important layout switch in CSS. It decides how an element generates boxes, how it sits next to other elements, and how its children are laid out. In this lesson you will learn block, inline and inline-block, display none versus visibility hidden, flow-root, display contents, and the modern flex and grid values. Every code block is editable, so change values and watch the preview.

display block vs inline, inline-block vs inline, display none vs visibility hidden, display flow-root, display contents, inline-block whitespace gap, vertical-align, CSS box model, outer and inner display type, display flex, display grid, hidden attribute, accessibility tree, CSS reset, layout basics for beginners.

1. Outer and Inner Display Type

Every element has two display roles. The outer display type controls how the element behaves in the flow of its parent (block or inline). The inner display type controls how its children are laid out (flow, flex, grid). Modern CSS lets you write both values, for example display: block flex equals display: flex, and display: inline flex equals display: inline-flex. You will mostly use the single keyword form.

2. display: block

Starts on a new line and stretches to fill the full available width of its parent.
Respects width, height, margin and padding on all four sides.
Default for div, p, h1 to h6, section, article, header, footer, ul, ol, li (list-item) and form.
Vertical margins of neighbouring blocks can collapse into one margin.

3. display: inline

Flows inside a line of text and only takes the width of its content.
Ignores width and height.
Horizontal margin and padding work. Vertical padding is drawn but does not push other lines away, and vertical margin has no effect.
Default for span, a, strong, em, code, img (replaced inline element) and label.

4. display: inline-block

Inline-block is the hybrid. The element sits in a line like text, but inside it behaves like a block, so width, height, vertical margin and padding all work. It is perfect for badges, pills, small buttons, tags and image thumbnails inside text.

The whitespace gap problem

Inline-block elements are treated like words, so the space or line break between them in your HTML becomes a visible gap of about 4px. Fixes: use flexbox instead (best), set font-size: 0 on the parent and reset it on children, remove whitespace in HTML, or use negative margin. For real layouts prefer display: flex with gap.

vertical-align

Inline-block boxes align to the text baseline by default, which can create extra space under images. Use vertical-align: middle or top, or make the image display: block to remove the small gap under it.

5. display: none, visibility: hidden and opacity: 0

display: none: element is removed from layout and from the accessibility tree. No space is reserved. Child elements cannot be shown.
visibility: hidden: element is invisible but still takes space. Hidden from screen readers and not focusable. Children can be made visible with visibility: visible.
opacity: 0: element is transparent but still takes space, still receives clicks and keyboard focus and is still read by screen readers. Use it only for animations.
The HTML hidden attribute applies display: none by default. Be careful, your own display rule can override it.
For screen-reader-only text use a visually hidden utility class (clip and 1px size), not display none.

6. display: flow-root

display: flow-root creates a new block formatting context. It makes a parent contain its floated children and stops margin collapse between parent and child. It is the modern, clean replacement for the clearfix hack.

7. display: contents

display: contents removes the element's own box but keeps its children, so they behave as if they were direct children of the grandparent. Useful for grid and flex layouts with wrapper elements. Do not use it on buttons, links or other interactive elements because some browsers used to drop their semantics.

8. display: flex, grid and inline variants

display: flex and display: grid create block-level containers. display: inline-flex and display: inline-grid create inline-level containers. Their children become flex items or grid items, so properties like float and vertical-align stop working on them. You will study flexbox and grid in detail in later lessons.

9. Other values you will see

list-item: block box with a marker (li).
table, table-row, table-cell: make any element behave like table parts (use only for real tabular layouts or legacy work).
ruby: for East Asian annotation text.

10. Common Mistakes

Setting width and height on a span and wondering why nothing happens.
Using opacity: 0 to hide content that should be removed for screen readers.
Fighting inline-block gaps instead of switching to flexbox.
Overriding the hidden attribute with a display rule.
Using display: none on content that must stay available to assistive technology.

Key Takeaways

Block fills the row, inline flows with text, inline-block gives you inline flow plus box control. Know the difference between display none, visibility hidden and opacity 0, use flow-root to contain floats, and prefer flex and grid for real layouts.

Try it Yourself HTML

<style>
  body { font: 18px/1.6 system-ui, sans-serif; padding: 16px; }
  .box { padding: 10px 16px; margin: 8px; color: #fff; }
  .b { display: block; background: #2a9d8f; width: 240px; }
  .i { display: inline; background: #e76f51; width: 500px; height: 100px; }
  .ib { display: inline-block; background: #264653; width: 160px; height: 60px; }
</style>
<div class='box b'>display: block (own line, width works)</div>
<span class='box i'>inline (width and height ignored)</span>
<span class='box i'>inline again</span>
<div>
  <span class='box ib'>inline-block</span>
  <span class='box ib'>width and height work</span>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 16px; }
  .row { background: #eee; margin-bottom: 16px; }
  .tag { display: inline-block; background: #0b5fff; color: #fff; padding: 6px 12px; border-radius: 999px; }
  .fixed-gap { font-size: 0; }
  .fixed-gap .tag { font-size: 18px; }
  .flex { display: flex; gap: 8px; }
</style>
<p>1. Default inline-block (note the small gap):</p>
<div class='row'>
  <span class='tag'>HTML</span>
  <span class='tag'>CSS</span>
  <span class='tag'>JS</span>
</div>
<p>2. font-size: 0 fix (no gap):</p>
<div class='row fixed-gap'>
  <span class='tag'>HTML</span>
  <span class='tag'>CSS</span>
  <span class='tag'>JS</span>
</div>
<p>3. Modern fix: flex with gap:</p>
<div class='row flex'>
  <span class='tag'>HTML</span>
  <span class='tag'>CSS</span>
  <span class='tag'>JS</span>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 16px; }
  .demo { display: flex; gap: 8px; }
  .demo div { width: 120px; height: 70px; background: #e9c46a; display: grid; place-items: center; font-size: 14px; }
  .none { display: none; }
  .vis { visibility: hidden; }
  .op { opacity: 0; }
</style>
<div class='demo'>
  <div>A</div>
  <div class='none'>display: none</div>
  <div>B</div>
  <div class='vis'>visibility: hidden</div>
  <div>C</div>
  <div class='op'>opacity: 0</div>
  <div>D</div>
</div>
<p>Look at the gaps: display none leaves no space, visibility hidden and opacity 0 keep the space.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 16px; }
  .card { border: 3px solid #264653; padding: 10px; margin-bottom: 24px; }
  .card img, .thumb { float: left; width: 80px; height: 80px; background: #e76f51; margin-right: 12px; }
  .contain { display: flow-root; }
</style>
<p>Without flow-root the border collapses around the floated box:</p>
<div class='card'><div class='thumb'></div><p>Floated child escapes the parent.</p></div>
<p>With display: flow-root the parent contains the float:</p>
<div class='card contain'><div class='thumb'></div><p>Floated child is contained. No clearfix needed.</p></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 16px; }
  .grid { display: grid; grid-template-columns: repeat(3, 100px); gap: 8px; }
  .grid > * { background: #8ecae6; padding: 12px; }
  .wrapper { display: contents; }
</style>
<p>The wrapper uses display: contents, so its two children join the grid directly:</p>
<div class='grid'>
  <div>1</div>
  <div class='wrapper'>
    <div>2</div>
    <div>3</div>
  </div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 16px; }
  .line { background: #f1f1f1; padding: 8px; }
  .ib { display: inline-block; width: 70px; height: 70px; background: #2a9d8f; color: #fff; margin-right: 6px; }
  .mid { vertical-align: middle; }
  .top { vertical-align: top; }
</style>
<div class='line'>Baseline <span class='ib'></span> <span class='ib' style='height:40px'></span></div>
<div class='line'>Middle <span class='ib mid'></span> <span class='ib mid' style='height:40px'></span></div>
<div class='line'>Top <span class='ib top'></span> <span class='ib top' style='height:40px'></span></div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const elements = [
  { name: 'div', display: 'block' },
  { name: 'span', display: 'inline' },
  { name: 'button', display: 'inline-block' },
  { name: 'li', display: 'list-item' }
];

elements.forEach(function (el) {
  var widthWorks = el.display !== 'inline';
  console.log(el.name + ' is ' + el.display + ' | width and height work: ' + widthWorks);
});

Output

Press Run to execute.

Exercise: Turn Links into Inline-block ButtonsHTML

Style the three links so each one is an inline-block with padding 10px 20px, a 120px minimum width, centered text and rounded corners. Remove the whitespace gap between them without changing the HTML.

Try it Yourself HTML

<style>
  a { background: #0b5fff; color: #fff; text-decoration: none; }
</style>
<a href='#'>Home</a>
<a href='#'>About</a>
<a href='#'>Contact</a>

Output

Press Run to execute.

Show expected output

Three buttons with padding, min-width 120px and no visible gap between them

This is a self-check — compare your result with the expected output above.

Exercise: Hide Without Losing SpaceHTML

Make the second box invisible but keep its space in the layout. Then make a third version that removes both the box and its space.

Try it Yourself HTML

<style>
  .box { width: 100px; height: 60px; background: tomato; margin: 6px; display: inline-block; }
</style>
<div class='box'>1</div><div class='box'>2</div><div class='box'>3</div>

Output

Press Run to execute.

Show expected output

Box 2 uses visibility: hidden (space kept). Box 3 variant uses display: none (space removed)

This is a self-check — compare your result with the expected output above.

Was this page helpful?

CSS Display Property and Inline-block: Complete Guide

Trending keywords covered in this lesson

1. Outer and Inner Display Type

2. display: block

3. display: inline

4. display: inline-block

The whitespace gap problem

vertical-align

5. display: none, visibility: hidden and opacity: 0

6. display: flow-root

7. display: contents

8. display: flex, grid and inline variants

9. Other values you will see

10. Common Mistakes

Key Takeaways