Understanding the CSS Display Property

The display property is one of the most fundamental in all of CSS. It controls the single most basic question about any element: how does it behave in the layout? Does it stack vertically and take the full width, or flow inline with the text around it? Can you give it a height? Does it create a flex or grid context for its children? Nearly every layout decision starts here, which is why understanding display properly makes the rest of CSS layout far easier to reason about.

Block Elements

A block element takes up the full width available to it and starts on a new line, pushing whatever comes after it down below. Block elements also respect width, height, margin, and padding in all directions, so they are the workhorses of structural layout.

div, p, h1, section, article {
  display: block;
}

Elements like div, p, h1, section, and article are block-level by default. You rarely need to declare display: block on them explicitly, but it helps to understand that this is what makes them stack vertically and fill their container. When you want a clear structural region of the page, a block element is what you reach for.

Inline Elements

An inline element is the opposite. It does not start on a new line, and it only takes up as much width as its content needs, sitting within the flow of surrounding text. The important limitation is that width, height, and vertical margins do not apply to inline elements. You can set horizontal padding and margins, but you cannot give an inline element a fixed height or push it around vertically.

span, a, strong, em {
  display: inline;
}

Elements like span, a, strong, and em are inline by default. This is exactly the behaviour you want for them, because they are meant to wrap small pieces of text inside a paragraph without interrupting its flow. A link in the middle of a sentence should stay in the sentence, not break onto its own line, and inline display is what makes that happen.

Inline-Block

Sometimes you want the best of both: an element that stays in line with surrounding content but still accepts a width and height. That is what inline-block provides. It flows inline like an inline element but respects sizing and spacing like a block element.

.button {
  display: inline-block;
  width: 100px;
  height: 50px;
}

This is the classic choice for things like buttons, navigation items, and icons, elements that need defined dimensions but should sit alongside each other rather than stacking. Before Flexbox became widespread, inline-block was the standard way to lay out a horizontal row of sized items, and it still has its place for simple cases.

Hiding Elements with None

Setting display: none removes an element from the page entirely. It is not just invisible, it takes up no space at all, as though it were not in the document.

.hidden {
  display: none;
}

This is worth distinguishing carefully from visibility: hidden. Both hide an element from view, but they behave very differently in the layout. display: none collapses the element completely, so surrounding content fills the space it would have occupied. visibility: hidden hides the element but leaves its space reserved, creating an empty gap where it would have been. When you want something genuinely gone, like a closed modal or a collapsed dropdown, display: none is the right choice. When you want it hidden but still holding its place, reach for visibility: hidden.

Toggling Display with JavaScript

Because display controls whether an element appears at all, it is the property most often changed dynamically to show and hide content. JavaScript can flip it directly:

document.getElementById("myElement").style.display = "none";   // hide
document.getElementById("myElement").style.display = "block";  // show

This is the mechanism behind most interactive UI: modals that open and close, menus that expand, tabs that swap content in and out. Setting display to none removes the element and its space, and setting it back to block (or flex, or whatever layout the element needs) brings it back.

The Layout Values

Beyond controlling how an element behaves itself, display can also turn an element into a layout context for its children. Setting display: flex makes an element a flex container, arranging its children in a single direction with powerful alignment control, ideal for navigation bars, rows of cards, and one-dimensional arrangements. Setting display: grid makes it a grid container, arranging children in two dimensions across rows and columns, which suits dashboards and full-page layouts. There is also display: table, which makes an element behave like an HTML table for cases where you need table-style structure without table markup.

These values deserve their own deeper treatment, but the key point is that they all live under the same property. The same display that decides whether a span flows inline also decides whether a container lays its children out as a flexible row or a two-dimensional grid.

Choosing the Right Value

The decision usually comes down to a few clear cases. Use block for structural containers and sections that should stack and fill the width. Use inline for small text-level elements that belong within a line of content. Use inline-block when something needs to stay in line but also needs a defined width and height. Use none to remove an element completely, especially for content you toggle on and off. Reach for flex when you are arranging items in a single direction, and gridwhen you need rows and columns at the same time.

The Takeaway

The display property sits underneath almost everything in CSS layout. At its simplest, it decides whether an element stacks as a block, flows as inline, or combines both as inline-block. It also controls whether an element is visible at all through none, which differs from visibility: hidden in that it gives up its space entirely. And at the layout level, it is what turns an element into a flex or grid container. Get comfortable with how each value changes an element’s behaviour, and the rest of CSS layout becomes much more predictable.

See you soon