CSS Display Table
| Value | Behavior | Field note |
|---|---|---|
block | Full-width box, new line before and after | Headings, paragraphs, divs - accepts width and height |
inline | Flows inside text | Ignores width/height; vertical margins do not apply |
inline-block | Inline placement, block sizing | The classic button-and-badge value; whitespace between tags shows |
flex | Children become flex items | One-dimensional layout - the reference table on this site covers the axes |
grid | Children become grid items | Two-dimensional layout - rows AND columns |
none | Removed from rendering and a11y tree | Distinct from visibility:hidden, which keeps the box |
contents | The box vanishes, children stay | Flatten wrapper divs for grid/flex - support is now universal |
table / table-cell | Legacy table layout | Still the only pure-CSS vertical centering pre-flex relic |
list-item | Block with a marker box | What li really is - explains bullets appearing on divs |
display is the most consequential property in CSS: it decides whether an element is a rectangular box, flowing text, or a layout container for everything inside it. Get it wrong and width stops working, margins vanish, and layouts collapse for reasons that look mystical. The table below is the working nine values with the behavior notes that de-mystify them.
Bottom line: inline elements ignore width, height and vertical margins - the number one layout confusion in CSS. inline-block is the compromise that keeps text-flow placement but accepts full box styling, which is why badges, buttons and labels want it. And none versus visibility:hidden is a question of existence: none removes the element from rendering AND the accessibility tree, hidden keeps the box invisible but present.
The honest part: the layout values (flex, grid) changed display from a classification into a superpower - setting display: flex doesn't style the element so much as it rewrites the rules for its children. The newest value, contents, goes further: the element's own box disappears and its children join the parent's layout - the escape hatch for wrapper divs that exist only for styling convenience.
How to use
- Find the behavior you need in the table; the field notes carry the ignored-properties and classic-use notes.
- Remember the inline limitation before debugging: width, height and vertical margin simply do not apply to inline elements.
- Choose none or visibility:hidden by intent - gone (a11y tree too) versus invisible-but-present (layout space kept).
Frequently asked questions
What is the difference between inline, block and inline-block?
block takes the full available width, starts on a new line, and accepts every box property. inline flows inside text like a word and ignores width, height, and vertical margins - setting them does nothing silently. inline-block is the hybrid: it flows inline like text but accepts the full box model, which is why badges, buttons and custom checkboxes use it. Its one quirk: whitespace between inline-block elements in the HTML renders as a visible gap.
When is display: contents useful?
When a wrapper element exists only for styling or component reasons but should not participate in layout. display: contents removes the wrapper's own box - its children are treated as direct children of the wrapper's parent. The classic use: a component renders a wrapper div, but the parent is a grid and the wrapper would break the grid arrangement; with contents, the wrapper's children become grid items directly. Accessibility caveat: early implementations dropped the element's semantics too - test with a current browser.
Is display: none the same as visibility: hidden?
No - and the difference is structural. display: none removes the element from rendering entirely: no box, no space, no accessibility tree presence, no focus. visibility: hidden keeps the layout space (the invisible box still pushes things around) and the element stays in the accessibility tree in some engines. Rule of thumb: none for content that is genuinely absent (a dismissed dialog), hidden for content that must reserve its place or animate back in.
Why do my width and height not work on a span?
Because spans are inline by default, and inline elements ignore width, height and vertical margins by design - their job is to flow inside text. The fix is one line: display: inline-block keeps the inline placement but honors the box model. This is also why image alignment quirks disappear with display: block on an img - the image stops sitting on the text baseline like a very heavy word.