HTML and CSS Reference
In-Depth Information
and then applying it to markup like this:
<p>
List below not displaying as such
</p>
<ul>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
A complete example showing all these
display
examples is provided here:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Display Property
</title>
<style type="text/css" media="all">
p {border: 2px solid red;}
p.remove {display: none;}
p.invisible {visibility: hidden;}
p.setasinline {display:inline;}
p.setasblock em {display: block;}
p.setaslist em {display:list-item; list-style-position: inside;}
ul li {display: inline;}
</style>
</head>
<body>
<p>
First paragraph (next is display:none).
</p>
<p class="remove">
Removed second paragraph.
</p>
<p>
Third paragraph (previous is display:none).
</p>
<p>
Fourth paragraph (next is visibility:hidden).
</p>
<p class="invisible">
Invisible fifth paragraph.
</p>
<p>
Sixth paragraph (previous is visibility:hidden).
</p>
<p class="setasinline">
Inline paragraph.
</p>
<p class="setasinline">
Inline paragraph.
</p>
<p class="setasinline">
Inline paragraph.
</p>
<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
normally.
</p>
<p class="setaslist">
List made from em tags:
<em>
Item
</em> <em>
Item
</em>
<em>
Item
</em> </p>
