23 September 2019

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 further confusing when you take into account the different HTML elements have different display properties by default.

`block`

Elements with a display value of block take up the full width of their parent container and create a new line after themselves. Some examples of elements with a default display value of block include div, h1, and p.

div {  // a div element has 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. Some examples of elements with a default display value of inline include span, a, and button.

span {  // a span element has display: inline by default  display: inline;}

Bear in mind that width and height properties cannot be applied to inline elements.

`inline‑block`

Elements with a display value of inline‑block behave like both inline and block elements. They only take up as much width as necessary, but you can still apply block‑level properties such as width, height, and padding:

span {  // despite a span element displaying as an inline element  // by default, if we use inline-block instead, we can then  // treat is as a block including width, height, and padding..  display: inline-block;  width: 20rem;  height: 10rem;  padding: 1rem;}

`none`

Elements with a display value of none are not displayed, and are removed from the visual flow of the page; they take up no space. If it is an interactive element (such as an a or button) then they will also be removed from the tabbing order so are inaccessible via the keyboard.

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

When it comes to accessibility, elements with display: none are not accessible to any users, including those using assistive technology (barring a few very old, or edge cases).

`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:

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.