CHAPTER 18 ■ DROP CAPS
Aligned Drop Cap
HTML
<p><span class="aligned-dropcap1">A</span>ligned Drop Cap Variation 1. Text is
large, bold, and aligned at the baseline. Subsequent lines are not indented.</p><p><span class="aligned-dropcap2">A</span>ligned Drop Cap Variation 2. The
drop cap is aligned to the middle of the text. Subsequent lines are not indented.
The drop cap pushes down the second line a little bit.</p><p><span class="aligned-dropcap3">A</span>ligned Drop Cap Variation 3. The
drop cap is offset to the top of the text. Subsequent lines are not indented.
The drop cap pushes down the second line quite a bit.</p>CSS
.aligned-dropcap1 { font-size:40px; line-height:normal; font-weight:bold;
vertical-align:baseline; }.aligned-dropcap2 { font-size:40px; line-height:0.8em; font-weight:bold;
vertical-align:middle; background-color:gold; padding:0 2px; }.aligned-dropcap3 { font-size:40px; line-height:normal; font-weight:bold;
font-style:italic; vertical-align:-0.45em; color:white;
background-color:black; background-image:url("marble.jpg");
padding:0 4px; border:1px solid black; }