CSS Documentation

Display

Menu

CSS Display Property

The display property in CSS specifies how an element should be displayed. It is one of the most important properties for controlling layout and the flow of content on a web page.

Common Display Values

  • block: The element generates a block element box, taking up the full width available and creating a new line before and after.
  • inline: The element generates one or more inline element boxes that do not create new lines.
  • inline-block: The element generates a block element box that flows with surrounding content as if it were a single inline box.
  • none: The element is completely removed from the document flow.
  • flex: The element behaves like a block element and lays out its content according to the flexbox model.
  • grid: The element behaves like a block element and lays out its content according to the grid model.

Example

Here's an example of using different display values:

.block-element {
ㅤdisplay: block;
}

.inline-element {
ㅤdisplay: inline;
}

.flex-container {
ㅤdisplay: flex;
}

Display: None vs Visibility: Hidden

It's important to understand the difference between display: none and visibility: hidden:

  • display: none removes the element completely from the document flow.
  • visibility: hidden hides the element, but it still takes up space in the layout.

Best Practices

  • Use display: block for elements that should start on a new line and take up the full width available.
  • Use display: inline for elements that should flow with text content.
  • Use display: inline-block when you want elements to sit inline but still maintain block-level features.
  • Use display: flex or display: grid for creating flexible or grid-based layouts.
  • Be cautious when using display: none as it can affect accessibility and SEO.

Understanding the display property is crucial for controlling the layout and flow of elements on your web page, allowing you to create complex and responsive designs.