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. |
Block, Inline, and Inline-block Examples
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.
Flexbox Basics
The flex layout allows flexible distribution, sizing, and alignment of child elements.
Tips for Using Display
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.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
