HTML and CSS Reference
In-Depth Information
entirely and extending the content area of the list item via
padding-left
,
you can make room to shove a new image into (
Figure 8.1
):
ul.big {
margin: 0;
padding: 0;
}
ul.big li {
font-size: 28px;
margin: 0 0 0.25em;
padding: 0 0 0 30px; /* image is 23x23, shift left to make
room */
background: url(images/big_bullet.png) no-repeat 0 6px;
}
[...]
<ul class="big">
<li>big item one</li>
<li>another big item</li>
<li>see the big bullet</li>
<li>last item</li>
</ul>
Figure 8.1
Icons placed in
gutter created by
padding.
