display in CSS: the switch that decides how an element exists

Before colors or fonts even enter the picture, every element on a page needs a status: does it claim the full available width, or does it simply flow inside the surrounding text? That decision belongs to display, and it is usually the very first property developers touch when an element refuses to behave as expected.

A custom button built from a <span>, an image that will not accept a fixed width, a <div> that stays glued to its neighbours: most of these surprises are solved by changing a single display value.

Definition

display determines the type of box the browser generates for an element, and therefore how it positions itself relative to its neighbours. Two families of values exist: simple values that manage a single element (block, inline, inline-block, none), and values that open an entire layout system for its children, such as flex or grid.

The four basic values

Choosing between these values changes three things: whether the element forces a line break, whether its width and height are honoured, and whether its vertical margins count.

By default, a tag like <div>, <p>, or <h1> is block: it stacks vertically with its neighbours. A tag like <span>, <a>, or <strong> is inline: it flows within the sentence and never forces a line break on its own. none goes further than a mere pause: the element reserves no space at all, as if it did not exist inside the Box model.

Concrete example: why a width has no effect

This trap shows up constantly when turning an element into a button or a card.

.tag {
  display: inline;
  width: 200px;
  padding: 12px 20px;
  background-color: #f97316;
}

On a <span class="tag">, this rule is largely ignored: a 200 pixel width simply does not exist for an inline element, which only takes the width of its own text. The fix is one line away.

.tag {
  display: inline-block;
  width: 200px;
  padding: 12px 20px;
  background-color: #f97316;
}

inline-block keeps the behaviour of an element that flows within text (it does not force a line break), while finally honouring width, height, and vertical margins, exactly like a block element. Our HTML and CSS course covers this trade-off between inline and block early on, so this kind of trap stops being a surprise once real projects are underway.

The classic trap: a link or span styled as a button

display and modern layout systems

The flex and grid values belong to the same property, but they change category: they open Flexbox and CSS Grid, two complete layout systems. display then acts on two levels at once: from the outside, the element behaves roughly like a block; on the inside, its direct children now follow the rules of the flexible flow or of the grid, instead of the document's normal flow.

Frequently asked questions

display: none removes the element from the layout entirely: no space is reserved, and neighbouring elements shift to fill the gap. visibility: hidden makes the element invisible but keeps its space intact, like an empty slot left in the page.

By specification, an inline element does not compute an independent box: its width matches exactly the width of its content, line by line, and cannot be forced with width. This is a deliberate choice, designed for text that must adapt to the line surrounding it.

Both, but not in the same way. From the outside, the element still behaves roughly like a block. On the inside, it is the direct children that change behaviour: they become flex items. Grandchildren are unaffected until they get their own display: flex.