CSS display Property
The display property specifies the display behavior (the type of rendering box) of an element and its children.
Description & Usage
The display property is the single most fundamental CSS layout property. It determines how an element generates its outer rendering box (defining how it interacts with sibling elements) and its inner formatting context (defining how its child elements are arranged).
Every HTML element has a default display value assigned by the browser user-agent stylesheet. For instance, <div> and <p> elements default to block, while <span> and <a> default to inline. Changing an element's display value allows developers to completely alter document layout behavior without modifying HTML structure.
Modern CSS uses display values like flex and grid to establish powerful 1D and 2D layout algorithms. Using display: none completely removes an element from the rendering tree, hiding it visually and making it inaccessible to screen readers and keyboard focus.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Layout |
| Initial Value | inline (for inline elements) / block (for block elements) |
| Inherited | No (not inherited) |
| Applies To | All elements |
Syntax
display: block | inline | inline-block | flex | grid | inline-flex | inline-grid | none;Property Values
| Value | Description |
|---|---|
| block | Starts on a new line and takes up the full available width of container. |
| inline | Renders element inline with text without starting on a new line. Height and width properties have no effect. |
| inline-block | Renders element inline, but allows setting custom width and height dimensions. |
| flex | Behaves as a block element and lays out its direct children according to the Flexbox model. |
| grid | Behaves as a block element and lays out its direct children according to the CSS Grid model. |
| none | Turns off the display of an element so that it has no effect on layout (removes it from document flow). |