CSS Tutorial / CSS display: Block, Inline, inline-block, and Hiding

The display property determines how an element generates boxes and participates in layout. Block, inline, and inline-block behave differently in normal flow; display: none removes the box, while visibility: hidden leaves its layout space.

Compare block, inline, and inline-block

div·p is usually displayed as a block, and span·a is usually displayed inline. If you do not give a block a separate width, it will usually fill the available width of its parent. Inline is placed within a line like letters in a sentence, allowing long content to be split across multiple lines. An inline-block is treated as a single box placed within a line, so even if the content inside the box is wrapped, the box itself is not split into multiple pieces like a regular inline.

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

The entire example gives the same size and margin to the same three spans and only changes the display. block writes a new line for each item, while inline-block places them on the same line if there is space. The width·height declaration of inline does not make the actual box size of the plain text span into that number, even if it remains in the style list. Check the calculated declaration and actual used size separately.

Understand inline spacing and replaced elements

In regular inline, left and right margins and padding affect the space within the line. Top and bottom padding and borders can be drawn, but do not determine line height by pushing surrounding lines like blocks. If you give large vertical padding to multi-line text, it may appear overlapping. Throughout the example, we observe the display by allowing some leeway in the line height.

Do not apply “inline elements cannot be sized” to every element. Replaced elements, such as img, display external content and can use width and height even when their default display is inline. The blue rectangle in the example is 120 × 60px. Treat it differently from an ordinary text span. The MDN guide to block and inline layout explains the underlying flow.

Compare display: none and visibility: hidden

DOM (Document Object Model) is a model in which browsers treat HTML documents as an element structure. Hiding with CSS is different from deleting an HTML element. Paragraphs with display: none can also be found in Elements in developer tools. In the “front, target, back” line of the entire example, hidden leaves a blank space at the target position, and none means the letters behind it are brought forward.

Hiding an element can change keyboard access and its availability to assistive technology as well as its appearance. This exercise compares box space in a static document. For real menus and controls, also check focus management and whether necessary information remains available. See MDN: display, MDN: visibility.

Align inline-block boxes within normal flow

Because inline-block is inside a line of text, it is aligned to the baseline of the line by default. If you see empty space under an item or items with different heights are misaligned, check vertical-align and line-height together. Even whitespace or line breaks between items in HTML can be visible gaps in inline placement.

Even if you change the appearance with display, the span does not have a title meaning or the div does not function as a button. Choose the HTML that fits your meaning and set its placement. If you need to manage the alignment, spacing, and size of multiple boxes together, the rules you learn later in Flexbox·Grid may be more appropriate. Once you understand the basic flow, it becomes easier to determine what the arrangement changes. How to place items along one axis is covered in a full example in Flexbox Basics: Containers, Items, and Axes. How to design rows and columns together is covered with a full example in CSS Grid Basics: Tracks, Lines, and Item Placement.

Run the example and change one value at a time

Save the code below as UTF-8 in display.html and open it. The image examples contain SVG data that can be run without a file. Compare three placement methods and three hidden states in the same document.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. In Developer Tools, check the size of block and inline-block items up to their borders. It's 120×48px because of the common border-box rule. inline items are not fixed to a width of 120px even if they have the same width declaration.
2. Narrow the window to see if the third item in the inline-block wraps to the next line. Each block starts on a new line, even on wide screens.
3. .none Turns off the display: none declaration in .target. Check whether the position of the letters behind it changes as the target appears. If you turn off the visibility declaration of hidden, the object will appear, but the space originally reserved will be maintained.
4. Change only the width of the image to 160px. Unlike a regular inline span, I check if it changes size and revert to 120px. If you keep the height 60px fixed and only change the width, the original ratio will change.

If the placement is different from expected, check the final display value, parent placement method, box size, and line height. Rather than adding over and over again size declarations that don't apply, it's helpful to first distinguish between element types and basic flows.