CHAPTER 18 ■ DROP CAPS
Hanging Drop Cap
HTML
<p class="hanging-indent"><span class="hanging-dropcap">H</span>anging
Drop Cap. This drop cap hangs in the margin. No text flows back under
the backdrop when it flows past the bottom of the drop cap.
The drop cap can be lowered and raised without affecting the line height.
Using <code>top</code> and <code>left</code>,
you can adjust the position of the drop cap and the position of the text
next to the drop cap.</p>CSS
.hanging-indent { padding-left:50px;
text-indent:-50px;
margin-top:-25px; }.hanging-dropcap { position:relative;
top:0.55em;
left:-3px;
font-size:60px;
line-height:60px;
font-weight:bold; }