CSS Display

The display property defines how an element is displayed in the document. It fundamentally affects page layout and element behavior.

Basic Display Values

The most important display values are: block, inline, inline-block, flex, grid, and none. Each defines the element’s layout in a different way.

Value	Effect
block	Displayed as a block-level element, breaks onto a new line.
inline	Displayed inline, does not break the line.
inline-block	Displayed inline but behaves like a block.
flex	Creates a flexible layout for its children.
grid	Provides a grid structure for layout.
none	The element is not displayed in the document.

In the following example, three different display values are used to show the differences.

The block element breaks to a new line, the inline element continues within the line, while the inline-block element combines both behaviors.

The flex layout allows flexible distribution, sizing, and alignment of child elements.

Choosing the right display value is essential for good layout.

Use flex or grid for more complex layouts.
Inline-block is useful for aligning multiple elements in a row.
Display: none completely removes the element visually, but it remains in the DOM.