HTML and CSS Reference
In-Depth Information
setting
visibility
, to be discussed later, which also prevents an element from displaying, but
does typically reserve canvas space. To turn off a paragraph, try a rule such as the following,
p.remove {display: none;}
which might be applied to the following markup:
<p>
First paragraph (next is display:none).
</p>
<p class="remove">
Removed second paragraph.
</p>
<p>
Third paragraph (previous is display:none).
</p>
This will completely remove the second paragraph from the document tree, as shown here,
where we apply a border to see the paragraphs:
Now
visibility
is different. If we added a rule like this
p.invisible {visibility: hidden;}
and applied it to a similar set of paragraphs
<p>
Fourth paragraph (next is visibility:hidden).
</p>
<p class="invisible">
Invisible fifth paragraph.
</p>
<p>
Sixth paragraph (previous is visibility:hidden).
</p>
we see a different result, as the object is still taking up canvas space and is simply invisible:
The point we are making with
display
is that you have quite a bit of power to affect
how elements are treated in the document tree. Aside from simply turning off elements, you
can make elements fundamentally act differently. For example, we can turn a block element
(such as a paragraph) into an inline element, thus keeping it from adding a new line. For
example, the following would change the form of all paragraphs in the document,
overriding the known action:
p.setasinline {display: inline;}
When applied to
<p class="setasinline">
Inline paragraph.
</p>
<p class="setasinline">
Inline paragraph.
</p>
<p class="setasinline">
Inline paragraph.
</p>
