CSS class overlap includes the property line-height set to 0. Therefore, when utilizing the overlap class, the content within the html tags is expected to overlap.
In the demonstration below, there are two examples. The first example functions correctly. The p tag employed has the overlap class, causing the three lines separated by the <br> tag to overlap with a vertical line spacing of 0.
In the second example beneath the horizontal line, the div contains three distinct p tags each with the overlap class applied individually.
Likewise in the third example, the div storing three diverse tags utilizes the overlap class and behaves similarly to the second example.
The fundamental question raised is: why does the overlap class, specifically the line-height property, fail to function on the second and third divs? What mistake have I made and how can I correct it to ensure the code works seamlessly, eliminating any vertical line spacing between paragraphs causing them to overlap?
The Demo Snippet
<DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
.overlap {
line-height: 0;
}
</style>
</head>
<body>
<hr>
<!-- #1 zero line-height used, paragraphs overlap -->
<div>
<p class="overlap">
This is a paragraph in normal style.<br>
This is a paragraph in italic style.<br>
This is a paragraph in oblique style.<br>
</p>
</div>
<hr>
<!-- #2 even zero line-height used, paragraphs dont overlap -->
<div>
<p class="normal overlap"> This is a paragraph in normal style.</p>
<p class="italic overlap"> This is a paragraph in italic style.</p>
<p class="oblique overlap"> This is a paragraph in oblique style.</p>
</div>
<hr>
<!-- #3 even zero line-height used, paragraphs dont overlap -->
<div class="overlap">
<p class="normal "> This is a paragraph in normal style.</p>
<p class="italic "> This is a paragraph in italic style.</p>
<p class="oblique"> This is a paragraph in oblique style.</p>
</div>
<hr>
</body>
</html>