CHAPTER 18 ■ DROP CAPS
Floating Drop Cap
HTML
<h1>Floating Drop Cap</h1>
<p><span class="floating-dropcap1">F</span>loated Drop Cap Variation 1. This
drop cap is lowered without affecting the height of the line.
Using <code>top</code>, <code>margin-left</code>, <code>margin-right</code>,
and <code>margin-bottom</code>, you can adjust the position of the drop cap
and the position of the text next to the drop cap.</p>
<br />
<p><span class="floating-dropcap2">F</span>loated Drop Cap Variation 2.
Notice how the drop cap has been moved up and to the right, and the text
has moved to the right.</p>CSS
.floating-dropcap1 { float:left; position:relative; top:-0.25em;
margin-left:-3px; margin-right:3px; margin-bottom:-0.6em;
font-size:80px; line-height:normal; font-weight:bold; }.floating-dropcap2 { float:left; position:relative; top:-0.35em;
margin-left:20px; margin-right:5px; margin-bottom:-0.7em;
font-size:80px; line-height:normal; font-weight:bold;
color:white; background-color:black; padding:0 20px;
background-image:url("marble.jpg");
border-left:2px groove black; border-right:2px ridge black;
border-top:2px groove black; border-bottom:2px ridge black; }