Display

Go back to HTML and CSS Index

There are a lot of ways to create the desired layout of a page - one of them is to use the display property.

The display property

The display property specify the display behaviour of an element.

The standard value of the display property for the element depends on the element and the browser's user agent style sheet.

element {
display: block | inline-block | inline | flex | grid
}
5.10 | The display property

We will get back to the flex and grid values soon.

display: block

The element is displayed as a block element, meaning that it takes up the full width of its parent.

The block value can e.g. be used in connection with images that you want to center:

.imgCenter {
display: block;
width: 60%;
margin: 0 auto;
}
5.11 | An imaged that is displayed as a block element

Example

Image by Nathan Anderson from Unsplash

display: inline

The element is displayed inline with other elements.

The value is sometimes used in relation to navigational items that you want to have placed inline:

ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline;
margin: 0;
padding: 10px;
}
5.12 | List items displayed inline

Example

  • Something
  • Something
  • Something

display: inline-block

Compared to display: inline, inline-block allows you to set a width and height on the element. Also, margins and paddings are respected using inline-block - they are not when using just inline.

Compared to display: block, display: inline-block does not take up the full width of the parent element.

ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
margin: 0;
padding: 10px;
}
5.13 | List items displayed inline

Example

  • Something
  • Something
  • Something