Hanging Drop Cap Example Using CSS.

Hanging Drop Cap Example Using CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS / HTML
  • 2 mins read

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.