Web Design in a Nutshell, 3rd Edition

Obviously, if the value of visibility is visible (the default), the element will be visible. When it is set to hidden, the element is invisible, but it maintains its spot in the document flow; you just can’t see it. This makes it distinctly different from display: none, which removes the element from of the document flow completely and closes up the space it once occupied.

In this example, an inline text element is hidden (Figure 21-13). It is easy to see that the space for its element box is preserved. Notice also that all aspects of the element (including its content, background, and border) are invisible as well.

    span.a {background-color:#CCCCCC; border: 1px solid #000;visibility: visible;}
    span.b {background-color:#CCCCCC; border: 1px solid #000; visibility: hidden;}

<p>Aliquam pulvinar volutpat nibh. Integer convallis nulla sit amet magna. <span
class="a"> Maecenas imperdiet turpis ac augue. Integer malesuada mauris a
odio vulputate blandit.  Etiam accumsan. </span> Proin eros massa, condimentum sit
amet, semper vitae, pulvinar non, augue.  </p>

<p>Aliquam pulvinar volutpat nibh. Integer convallis nulla sit amet magna. <span
class="b"> Maecenas imperdiet turpis ac augue. Integer malesuada mauris a
odio vulputate blandit.  Etiam accumsan. </span> Proin eros massa, condimentum sit
amet, semper vitae, pulvinar non, augue. </p>

Figure 21-13. Setting visibility to hidden

The collapse