layout
display
Sets whether an element is treated as a block or inline box and defines the layout used for its children. It is the single most important property for controlling how boxes participate in the flow.
display: block | inline | inline-block | flex | grid | none | contents | inline-flex | inline-gridCommon values
| Value | Effect |
|---|---|
| block | Element takes full available width and stacks vertically |
| inline | Element flows inline; width/height are ignored |
| inline-block | Flows inline but respects width/height and vertical padding |
| flex | Establishes a flex formatting context for children |
| grid | Establishes a grid formatting context for children |
| none | Removes the element from the render tree entirely |
| contents | Makes the box vanish; children behave as if promoted to the parent |
Examples
.menu { display: flex; gap: 1rem; }Turns .menu into a horizontal flex row
.hidden { display: none; }Removes element and its space from layout
span.badge { display: inline-block; width: 40px; }Inline flow but honors explicit width
Gotcha
display: none removes the element from the accessibility tree; use visibility: hidden or opacity: 0 if you need it kept for assistive tech.
Related properties
position
Controls how an element is positioned in the document and whether it participates in normal flow. Non-static values enable top/right/bottom/left offsets and create a positioning context.
overflow
Determines what happens when content exceeds its box's boundaries. Setting overflow to anything but visible creates a new block formatting context.
flex
Shorthand for flex-grow, flex-shrink, and flex-basis on a flex item. Controls how the item grows or shrinks to fill the flex container.
grid-template-columns
Defines the number, size, and naming of columns in a grid container. Supports flexible fr units, repeat(), minmax(), and auto-fit/auto-fill for responsive layouts.
box-sizing
Controls whether an element's declared width and height include padding and border. border-box is the modern default most stylesheets set globally.