HTML and CSS Reference
The classification properties specify how an element is displayed and whether it is visible.
The display property determines the kind of box that surrounds an element. It can make
any element appear as inline, block, or any other type. Every element has a default display
value that depends on what type of element it is.
display : none | inline | block | list-item | inline-block |
inline-table | table | table-cell | table-row |
table-column | table-column-group | table-footer-group |
table-header-group | table-row-group | flex | inline-flex |
grid | inline-grid | run-in
Most HTML elements display as either inline or block; others have special display
properties, such as list-item for the <li> element and table-cell for the <td> and <th>
elements. By using the display property, any element can be changed to be rendered as
these or any other element type. For instance, the following link is rendered as a block
element instead of an inline element:
<a href="#" style="display: block;">Block link</a>
One of the more useful values for display is inline-block , which combines features
of both block and inline. An inline-block element is like an inline element, except that
it can also manipulate the width, height, and vertical margin properties of the box model
as a block element does. These features are the same as those of replaced inline elements,
such as <img> and <button> . As such, these elements were formally redefined as
inline-block elements in HTML5.