Home » CSS » Hanging Drop Cap Example Using CSS

Hanging Drop Cap Example Using CSS

By

In this tutorial, I am giving a hanging drop cap example using the CSS.

Hanging Drop Cap Using CSS

The following is the CSS for HTML header part to make character hanging drop cap. CSS defined for two classes hanging-indent and hanging-dropcap.

<style>

*.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; }
body { margin:10px; width:720px;
font-family:verdana,arial,sans-serif; font-size:18px; }
h1 { margin:10px; font-size:30px; }
p { margin:10px; margin-top:20px; } 

</style>

The script for the HTML Body part:

<h1>Hanging Drop Cap</h1>

<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>

Output

As shown in the featured image of this article.