Display

CSS Display

The CSS display property controls how an element participates in page layout. It can determine whether an element behaves like a block or inline element, is removed from the layout, or becomes a container for Flexbox or Grid.

The display Property

HTML elements have default display behavior provided by the browser's stylesheet. For example, elements such as <div> and <p> normally behave as block elements, while elements such as <span> and <a> normally behave as inline elements.

The CSS display property can change this behavior.

div {
  display: block;
}

span {
  display: inline;
}

Some of the most useful values for beginners are block, inline, inline-block, none, flex, and grid.

Block Elements

An element with display: block; generates a block-level box. In normal flow, block boxes are generally placed one below another and typically expand to fill the available width when their width is auto.

.box {
  display: block;
}

Block elements can be given properties such as width, height, padding, border, and margin.

Inline Elements

An element with display: inline; generates an inline box that participates in a line of text. Inline boxes normally remain on the same line as surrounding inline content when enough space is available.

.item {
  display: inline;
}

Unlike a block box, a normal inline box does not use width and height to control its dimensions in the same way. Its size is primarily determined by its content.

Inline-Block Elements

The inline-block value combines useful characteristics of inline and block layout. The element participates in inline flow but its box can be given a width and height.

.item {
  display: inline-block;
  width: 150px;
  padding: 10px;
}

Multiple inline-block elements can appear next to one another when enough horizontal space is available.

Changing Display Behavior

The display property can change an element's default display behavior without changing the HTML element itself.

a {
  display: block;
}

An <a> element normally behaves as an inline element. Setting it to block changes how its box participates in layout, but the element is still an HTML link and keeps its HTML meaning.

CSS changes presentation and layout; it does not change the semantic purpose of the HTML element.

The none Value

Setting display: none; prevents an element from generating boxes in the layout. The element and its descendants are not displayed, and the space they would have occupied is removed.

.message {
  display: none;
}

This differs from simply making an element visually transparent because display: none; removes its boxes from the page layout.

The flex Value

Setting display: flex; makes an element a flex container. Its direct children become flex items that can be arranged and aligned using Flexbox properties.

.container {
  display: flex;
}

Flexbox is especially useful for arranging items in a row or column and controlling their alignment and spacing. The Flexbox Basics tutorial later in this section introduces the most important Flexbox concepts.

The grid Value

Setting display: grid; makes an element a grid container. Its direct children become grid items that can be arranged into rows and columns.

.container {
  display: grid;
}

CSS Grid is useful for layouts that need structured rows and columns. The Grid Basics tutorial later in this section introduces the basic Grid properties.

Try the display Property

Edit the display values in the example to compare block, inline, and inline-block. Notice how each value changes the way the elements are arranged.

Summary

The CSS display property controls how an element participates in page layout. The block, inline, and inline-block values provide different box behaviors, while none removes an element's boxes from the layout. The flex and grid values create containers for modern CSS layout systems.

The next tutorial covers Position and introduces the different ways CSS can position elements on a page.