HTML and CSS Reference
In-Depth Information
Chapter 22
Classification
The classification properties specify how an element is displayed and whether it is visible.
display
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.