Pro HTML5 and CSS3 Design Patterns

CHAPTER 18 ■ DROP CAPS

Marginal Drop Cap

HTML

<h1>Marginal Drop Cap</h1>

<p class="indent"><span class="marginal-dropcap">M</span>arginal Drop Cap.

The marginal drop cap indents the text to the right and uses absolute

positioning to move the drop cap into the margin created by the indent. All

text stays to the right of the drop cap. In other words, text does not wrap

back under the drop cap when it extends below the drop cap.</p>

CSS

.indent { position:relative; margin-left:72px; margin-top:20px; }

.marginal-dropcap { position:absolute; left:-77px; top:-16px;

font-size:80px; font-weight:bold;

color:black; background-color:white; }