CSS Display Property

Understanding the display Property

The display property determines how an element is rendered in the document flow. It can turn an element into a block, inline, flex container, grid container, or hide it completely.

Common Values

• block – starts on a new line and takes up the full width.
• inline – flows within text, only takes up as much width as needed.
• inline-block – like inline but respects width/height.
• flex – creates a flex container.
• grid – creates a grid container.
• none – element is not rendered.

Interactive Demo

Code Example

.example {
  display: flex; /* change to block, inline, grid, etc. */
}

Experiment with the dropdown above to see how each display value affects the layout.