What is the display CSS property and how to use it

• Bloggen
• >
• CSS tutorials
• >
• What is the display CSS property and how to use it

The display property in CSS is used to set the type of display an element should have on the web page. It specifies the layout behavior of an element along with its visibility.

Syntax

selector {
  display: value;
}

The above syntax shows that to use the display property in CSS, we first need to select an element using a selector like class, ID, or tag name, and then set the display property to a specific value. The value can be any of the following:

• block: This value is used to display an element as a block-level element, taking up the full width available, and starting from a new line.
• inline: This value is used to display an element as an inline-level element, taking up only as much width as required, and not starting from a new line.
• none: This value is used to hide an element completely by removing it from the page layout and visibility.
• flex: This value is used to display an element as a flexible container that can be used to change the layout and alignment of its children.
• grid: This value is used to display an element as a grid container that can be used to arrange its children in a grid layout.

Examples

Let’s see some examples of how the display property can be used in CSS:

// To display an element as a block-level element
p {
  display: block;
}

// To display an element as an inline-level element
span {
  display: inline;
}

// To hide an element completely
.hidden {
  display: none;
}

// To display an element as a flexible container
.container {
  display: flex;
}

// To display an element as a grid container
.container {
  display: grid;
}

These were just a few examples of how the display property can be used in CSS. To learn more about this property and its various values, check out MDN Web Docs.

  Written by: Maria Jensen     10-06-2023     Written in: CSS tutorials