display

Values

• inline: the initial value. The element sits within a line, like the letters of the text. width and height have no effect, and vertical padding and border are drawn without pushing the lines apart.
• block: the element starts on its own line and stretches to the full width.
• inline-block: a single solid box that sits within a line. width, height, and vertical spacing all take effect.
• flex / inline-flex: a block (or a box within a line) that lays out its children with flexbox. By default they sit in one row, and children without a set height stretch to the height of the row.
• grid / inline-grid: a block (or a box within a line) that lays out its children on a grid. Without columns, they stack in a single column, and children without a set width stretch to the width of the cell.
• flow-root: a block that starts a new block formatting context. Floats inside no longer stick out of the bottom, and the vertical margin of its children stays inside. In this page’s sample it looks the same as block.
• contents: the element’s own box disappears and its contents are laid out as if they sat directly in the parent. The element’s border and background are not drawn.
• none: neither the element nor its contents are shown, and they take up no space (unlike visibility: hidden, no gap is left).

When to use it

• Use flex or grid to line children up in a row or on a grid.
• Use inline-block to give a link or button a size while keeping it within a line of text.
• Use none to hide an element.

Things to watch

• Flex and grid items, floats, and elements with position: absolute or fixed are treated as blocks even with inline and the like (inline-flex becomes flex, and inline-grid becomes grid).
• You can also give the outside and inside as two words, as in display: inline flex, which all major browsers support. There are also list-item, which adds a list marker, and table parts such as table and table-cell. The control on this page only offers the main single-word values.
• Elements with none are hidden from screen readers too.
• On buttons, headings, lists and tables, contents can make some browsers drop the element's role (that it is a button, for example) for screen readers. Use it on plain wrappers such as a div when you only want to change how the contents are laid out.

In the preview, the value applies to the container placed in the middle of the text (the second child, with the dashed blue border). It holds three tags of different heights (display: inline-block).