HTML and CSS Reference
In-Depth Information
it renders quite differently than without the display modified:
Also, we can do the reverse and make elements that are not normally block act as such:
p.setasblock em {display: block;}
When this is applied to
<p class="setasblock">
This paragraph
<em>
has some
</em> <em>
emphasis tags
</em>
that act as blocks.
</p>
<p>
This paragraph
<em>
has some
</em> <em>
emphasis tags
</em>
that act normal-
ly.
</p>
it produces:
You also can coerce an element to act somewhat like a list by casting it with the
display
property, as shown here:
p.setaslist em {display:list-item; list-style-position: inside;}
When applied to
<p class="setaslist">
List made from em tags:
<em>
Item
</em>
<em>
Item
</em>
<em>
Item
</em> </p>
it renders like so:
We might also make a list not act as such by using a rule like
ul li {display: inline;}
