The CSS display Property

The display property determines the fundamental layout behavior of an element — whether it starts on a new line, whether it accepts a width and height, and how it interacts with the elements around it. It is one of the most frequently used and most consequential properties in CSS, because changing an element's display value can completely change how a layout behaves.

The most common values are block, inline, inline-block, and none, and understanding the practical difference between them clears up a lot of early CSS confusion, such as why a width declaration seems to have no effect on some elements.

Why it matters

The display property decides how an element takes part in layout: whether it starts a new line, whether it accepts a width, and whether it is shown at all. Width and margin that seem to be ignored are usually a sign that the element is inline. It is the property underneath every layout technique that follows.

block

Block-level elements (like <div>, <p>, and <h1> by default) always start on a new line and expand to fill the full width of their container unless a width is specified. They accept width, height, margin, and padding on all sides normally. Stacking block elements vertically is the natural, default flow of an HTML document.

inline

Inline elements (like <span>, <a>, and <strong> by default) flow within the surrounding text and do not start on a new line. Critically, they ignore width and height entirely, and vertical margin/padding is not respected for layout purposes (though it may render visually, it won't push surrounding content). Only horizontal padding and margin reliably affect layout on inline elements.

inline-block and none

inline-block combines both worlds: the element flows inline with surrounding content like an inline element, but it accepts width, height, and full margin/padding like a block element — commonly used for button-like elements that need to sit next to text but also need a defined size. display: none removes the element entirely from the rendered layout — it takes up no space at all and isn't visible, as opposed to visibility: hidden, which hides an element but preserves its layout space.

Examples

<!--
<span class="block-span">Block</span>
<span class="inline-span">Inline</span>
<span class="inline-block-span">Inline-block</span>
-->

.block-span { display: block; width: 200px; background: #eee; }
.inline-span { display: inline; width: 200px; background: #ddd; } /* width is ignored */
.inline-block-span { display: inline-block; width: 200px; background: #ccc; }

The block span forces a line break and honors its 200px width; the inline span sits within text flow but ignores the width entirely; the inline-block span flows next to surrounding inline content while still honoring the 200px width.

.hidden-none { display: none; }        /* removed from layout entirely */
.hidden-invisible { visibility: hidden; } /* still occupies its space */

The element with display: none disappears completely and surrounding elements collapse into its space, while the visibility: hidden element becomes invisible but leaves an empty gap where it used to be.

Exercise

Give the heading a yellow background and make it only as wide as its text while still accepting padding. Make the button stretch to the full width of its container. Hide the paragraph in a way that keeps its empty space on the page.

Expected result: a yellow box hugging the heading text, an empty gap where the paragraph was, and a full-width button.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

h1 {
  background: yellow;
  padding: 10px;
  /* TODO: shrink to the width of the text */
}

p {
  /* TODO: invisible, but still taking up space */
}

button {
  /* TODO: full width */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

h1 {
  background: yellow;
  padding: 10px;
  display: inline-block;
}

p {
  visibility: hidden;
}

button {
  display: block;
  width: 100%;
}

Quick quiz

Interview questions