My class called underlined has some styling applied:
<style>
.underlined {
border-bottom: 1px dotted blue;
}
</style>
When I compare a span and a div with this class, I noticed that the gap between the text and the border is different:
<span class="underlined">underlined text</span><br>
<br>
<div class="underlined">underlined text</div>
I tried adding some additional lines to my underlined class (to keep it aligned with the baseline grid):
<style>
.underlined {
border-bottom: 1px dotted blue;
margin: 0px;
padding: 0px;
outline: 0px;
outline-offset: 0px;
box-sizing: border-box;
height: 21px; /* which matches the line height of the whole body */
}
</style>
Although it now aligns with the baseline grid, the gap still remains inconsistent. :(
Has anyone come up with a solution?
Thank you so much!