CHAPTER 18 ■ DROP CAPS
Padded Graphical Drop Cap
HTML
<h1>Padded Drop Cap</h1><p><span class="padded-dropcap1">P</span>added Aligned Drop Cap. Text is
large, bold, and aligned at the baseline. Subsequent lines are not indented.</p><p><span class="padded-dropcap2">P</span>added Floating Drop Cap. The
drop cap is floated to the left and then offset to the right using
<code>padding-left</code>. It has a background image rendered in the
padding area. Subsequent lines are indented for as long as the drop cap is on
their left.</p>CSS
.padded-dropcap1 { padding-left:39%; font-size:80px; line-height:normal;
font-weight:bold; vertical-align:middle;
background:url("rose.jpg") no-repeat -65px 0 white; }.padded-dropcap2 { padding-left:275px; padding-right:10px; float:left;
position:relative; top:-0.25em; margin-bottom:-0.2em;
margin-left:-3px; margin-right:3px; color:black;
background:url("grabber.jpg") no-repeat 5px 20px white;
font-size:84px; line-height:normal; font-weight:bold; }