CSS Display

CSS Display Property

The CSS display property controls how an element generates boxes and how those boxes participate in page layout.

HTML elements have default display behavior, but CSS can change that behavior. An element can be displayed as a block, remain within a line of text, combine characteristics of both, become a Flexbox or Grid container, or be removed from the displayed layout.

Default Display Behavior

Browsers apply default display behavior to HTML elements through their user-agent styles. Many elements such as headings, paragraphs, and <div> elements normally generate block boxes, while elements such as <span> and <strong> normally participate inline.

<div>Block element</div>
<p>Another block element</p>
<p>Text with an <span>inline element</span> inside it.</p>

CSS can override these default display styles without changing the HTML element itself or its semantic meaning.

display: block

The block value makes an element generate a block box. Block boxes normally begin on a new line and participate in block layout.

.example {
  display: block;
}

A block box with an automatic width normally fills the available inline space of its containing block.

Properties such as width, height, padding, border, and margin can be used to control its dimensions and spacing.

display: inline

The inline value makes an element participate in inline layout so it can remain within a line of surrounding text.

.example {
  display: inline;
}

Inline boxes do not normally begin on a new line. Their layout behavior also differs from block boxes. For example, ordinary width and height declarations do not determine the dimensions of a non-replaced inline box in the same way they do for a block box.

display: inline-block

The inline-block value allows an element to participate in an inline formatting context while its contents are formatted as a block container.

.example {
  display: inline-block;
  width: 160px;
  padding: 10px;
}

Inline-block elements can appear beside each other while still allowing dimensions, padding, borders, and margins to create a box-like layout.

This can be useful for small interface components, labels, badges, and other elements that need to remain inline while accepting box dimensions.

display: none

The none value prevents an element from generating boxes, so it does not occupy space in the page layout.

.hidden {
  display: none;
}

Other elements are laid out as though the hidden element's generated boxes were not present.

Content hidden with display: none is also normally removed from the accessibility tree. It should not be used when content needs to remain available to assistive technology while only being visually hidden.

display: flex

The flex value creates a block-level flex container and establishes a flex formatting context for its direct children.

.container {
  display: flex;
}

The direct children become flex items that can be arranged and aligned using Flexbox properties.

Flexbox is especially useful for one-dimensional layouts where items need to be arranged primarily in a row or column. It is covered in detail later in the Layout tutorials.

display: grid

The grid value creates a block-level grid container and establishes a grid formatting context for its direct children.

.container {
  display: grid;
}

The direct children become grid items that can be arranged into rows and columns.

CSS Grid is designed for layouts where control across both rows and columns is useful. Grid is covered in detail later in the Layout tutorials.

display: flow-root

The flow-root value creates a block box that establishes a new block formatting context.

.container {
  display: flow-root;
}

One practical use is containing floated descendants so the container expands to include them without requiring a traditional clearfix technique.

.container {
  display: flow-root;
}
.image {
  float: left;
  margin-right: 15px;
}

Floats are covered later in the Float & Clear tutorial.

Table Display Values

CSS also provides display values that participate in table layout. Examples include table, table-row, and table-cell.

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}

These values control CSS box generation and layout behavior. They do not change an element into a semantic HTML table element.

When content is genuinely tabular, HTML table elements should be used to provide the appropriate document structure.

Changing Display Behavior

The display property changes an element's layout behavior, but it does not change the meaning of the HTML element.

span {
  display: block;
}

The <span> now generates a block-level box, but it remains a <span> element in the HTML document.

This separation between HTML semantics and CSS presentation makes it possible to change layouts without replacing elements solely for visual reasons.

CSS Display Example

The following example uses the same type of element with different display values. Open the example in the editor and change block, inline, or inline-block to see how each value changes the layout.

.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}