CODEWITHSUNDEEP
htmlcssmarginline-height
node_man
node_man

Reputation: 1449

What is the standard way to maintain specified margin between two lines if the line height exceeds the margin?

At the workplace they have provided me a wireframe like this.

enter image description here

Explanation about the above image: Maintain a margin of 10px between the lines and use the provided css class .font16 .

This is the content of the .font16 class :

.font16{
font-size: 16px;
line-height: 22px!important;
}

So this is what I have done.

My code without the class font16 :

<div><div style="margin-bottom:10px;">A quick brown fox</div><div>Junped over the</div></div>
The margin between them is exactly 10px.

My code with the class font16 :

.font16{
font-size:16px;
line-height:22px!important;
}
<div><div class="font16" style="margin-bottom:10px;">A quick brown fox</div><div>Junped over the</div></div>

So when I add the font16 class, then the margin between the lines appears to have increased due to the line-height.

This is what I've done to make sure that there is still a margin of 10px between them:

.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>

Calculations I've used in the above snippet: I subtracted the font size from the line-height i.e 22px-16px = 6px i.e 3px above the text and 3 px below the text. So 10px - 3px = 7px. Hence gave a margin bottom of 7px to ensure there is still a margin of 10px between the lines.

Is this the correct way that I'm using? I'm I doing the calculations about line-height and margin correctly?

Note: I can't change the values of the font16 class.

Upvotes: 0

Views: 148

Answers (1)

Mr Lister
Mr Lister

Reputation: 46609

If I'm interpreting the original drawing correctly, and there needs to be 10px between the lowercase letters, and if the intention is for both divs to have the class font16, then the solution is as follows. Just let the css do the calculations for you!

.font16{
font-size:16px;
line-height:22px!important;
}
<div>
  <div class="font16" style="margin-bottom:calc(10px + 1ex - 22px);">A quick brown fox</div>
  <div class="font16">Jumped over the</div>
</div>

Upvotes: 0

Related Questions