Press "Enter" to skip to content

Hanging Drop Cap Example Using CSS

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.


*.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; } 


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>


As shown in the featured image of this article.


Vinish Kapoor

Hi, I am a full stack developer and writing about development. I document everything I learn and help thousands of people. is created, written, and maintained by me; it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub, and get notifications for new posts.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *