Using display in CSS

Cascading Style Sheets (CSS), the display property determines how an element is displayed on the web page. It is a cornerstone part of any front‑end developer's knowledge and accepts a variety of values, each with its own specific behaviour.

This can be made a little more confusing when you take into account that user‑agent stylesheets give different HTML elements different display values by default.

block

In ordinary block flow, display: block starts a block on a new line. With width: auto, a typical block fills the available width of its containing block, accounting for margins, borders and padding. It can also have an explicit width. Browser styles normally give elements such as <div>, <h1> and <p> block display.

div {
  /* typical browser styles give div elements display: block by default */
  display: block;
}

inline

Elements with a display value of inline only take up as much width as necessary and do not create a new line after themselves. In typical browser user‑agent stylesheets, span and a are common default inline elements. Form controls such as button have their own browser styling and are usually rendered as inline-block boxes.

span {
  /* typical browser styles give span elements display: inline by default */
  display: inline;
}

The width and height properties do not size a non‑replaced inline box such as a text <span>. Replaced inline elements, such as images, can use those dimensions. Inline text can also have padding: horizontal padding affects spacing, but vertical padding does not increase the line box height and may overlap neighbouring lines.

inline-block

display: inline-block places a box alongside inline content whilst allowing width and height to size it. Its padding and borders contribute to the box's dimensions, and the box participates in the line's height. Padding itself is not exclusive to block boxes:

span {
  /* despite a span element displaying as an inline element
  in typical browser styles, if we use inline-block instead,
  we can size its box with width and height */
  display: inline-block;
  width: 20rem;
  height: 10rem;
  padding: 1rem;
}

none

display: none removes the element and its descendants from visual layout, so they take up no space. Links and buttons within it are also removed from the keyboard tab order.

button {
  /* this button will not be visible, nor be accessible
  via the keyboard or mouse */
  display: none;
}

display: none normally removes an element and its descendants from the accessibility tree as well as the visual layout. There is an important exception: hidden text explicitly referenced by aria-labelledby or aria-describedby can still contribute to another element's accessible name or description. That does not make the hidden element itself focusable or visible.

flex and grid

The display property can also take on the values flex and grid, which allows for more advanced layout options. There is a lot to unpick when it comes to flex and grid, so I've written individual articles about each to delve into more detail:

• Understanding and using flexbox in CSS
• How to use 'grid' in CSS

In brief: flex and grid use the flex-flow and grid-template properties (respectively ‑ and amongst many others) to define how child elements should be arranged within the container.

/* example of a basic flex layout */
.container {
  display: flex;
  flex-flow: row wrap;
}

/* example of a basic grid layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

Conclusion

The display property is a crucial part of CSS layout and plays a significant role in determining how elements are displayed to your users. Understanding the different values it can take and when to use them is essential for creating effective and efficient layouts.