HTML and CSS Reference
In-Depth Information
A common application of
inline-block
is to make list item elements (
<li>
) suitable
for horizontal navigation menus. Note that changing the display type of the list item
element from
list-item
to
inline-block
automatically removes the list marker.
li {
display: inline-block;
width: 100px;
background: #ccc;
}
With this rule in place, the following markup renders three boxes with gray
backgrounds next to each other, as illustrated in Figure
22-1
.
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Figure 22-1.
The inline-block value demonstrated
Another useful
display
value is
none
. It completely hides an element, making the
page render as if the element did not exist.
.removed { display: none; }
visibility
The
visibility
property can hide an element without removing the space it occupies by
setting the property's value to
hidden
.
visibility (block) : inherit | visible | hidden | collapse
The
collapse
value is meant to be used only on certain table elements: rows (
<tr>
),
columns (
<col>
), column groups (
<colgroup>
), and row groups (
<thead>
,
<tbody>
, and
<tfoot>
). According to specification,
collapse
should remove the hidden element (same
as
display: none
) and make the space available for other elements to claim. Regrettably,
not all major browsers follow the specification for this value. Setting the
display
property
to
none
results in more consistent browser behavior and should be used instead.
