My workplace provided me with a wireframe that looks like this:
https://i.sstatic.net/Qumru.png
Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16.
This is what the .font16 class contains :
.font16{
font-size: 16px;
line-height: 22px!important;
}
Here's what I've done so far:
My code without using the font16 class :
<div><div style="margin-bottom:10px;">A quick brown fox</div><div>Jumped over the</div></div>My code with the font16 class :
.font16{
font-size:16px;
line-height:22px!important;
}<div><div class="font16" style="margin-bottom:10px;">A quick brown fox</div><div>Jumped over the</div></div>When adding the font16 class, the margin between the lines seemed to increase due to the line-height.
To maintain a 10px margin between them, here's what I did:
.font16{
font-size:16px;
line-height:22px!important;
}<div><div class="font16" style="margin-bottom:7px;">A quick brown fox</div><div>Jumped over the</div></div>The calculations used in the snippet above: I subtracted the font size from the line-height i.e. 22px-16px = 6px which are divided equally above and below the text. Therefore, 10px - 3px = 7px. Hence, applied a bottom margin of 7px to ensure a 10px margin remains between the lines.
Am I following the correct approach here? Are my calculations regarding line-height and margin accurate?
Note: I am unable to alter the values of the font16 class.