What are outer and inner display types?

Modern CSS splits display into two parts: the outer type controls how the box participates in its parent's layout (block or inline), and the inner type controls how its own children are laid out (flow, flex, grid, table). display: flex is shorthand for display: block flex.

What is the difference between inline-block and flow-root?

inline-block equals display: inline flow-root — an inline-level box that establishes its own block formatting context, so it honours width and height. flow-root (block flow-root) does the same but at block level, mainly used to contain floats and stop margin collapse.

What does display: contents do?

It removes the element's own box so its children render as if they were direct children of the grandparent. This is useful for unwrapping a wrapper in flex or grid layouts, but it also removes the element from the accessibility tree, which can break semantics.

How is display: none different from visibility: hidden?

display: none removes the element and all descendants from layout entirely — they generate no boxes and take no space. visibility: hidden keeps the box and its space but makes it invisible. none also removes the subtree from the accessibility tree.

Does this tool run offline?

Yes. The display value table and legacy resolver run entirely in your browser with JavaScript. Nothing is uploaded, logged or stored.

CSS Display Property Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

What box an element generates

The display property is the single most important layout switch in CSS: it decides whether an element is a block or inline box and which layout model (flow, flex, grid, table) governs its children. Modern CSS reframes every value as an outer plus inner display type, which makes the once-mysterious keywords much clearer. This reference lists the common values with their outer/inner types and a resolver that expands each legacy keyword.

How it works

A legacy single keyword maps to an outer + inner pair:

display: block;         /* = block flow      */
display: inline-block;  /* = inline flow-root */
display: flex;          /* = block flex      */
display: inline-grid;   /* = inline grid     */

The outer type (block or inline) sets how the box itself flows among its siblings; the inner type sets the formatting context for its children. flow-root is special: it establishes a new block formatting context, which is why inline-block (inline flow-root) sizes like a block. The box-generation values stand apart: list-item adds a ::marker, contents makes the box itself disappear while keeping its children, and none removes the whole subtree from layout and the accessibility tree.

Tips and notes

display: flex/grid only changes the children’s layout, not the element’s outer flow.
Use flow-root (or inline-block) to contain floats without an empty clearfix element.
contents is powerful for unwrapping, but audit accessibility — it drops the box from the a11y tree.
none ≠ visibility: hidden: none removes space, hidden keeps it.