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 .
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
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; }
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.
Search WWH ::

Custom Search