0

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.

node_man
  • 1,359
  • 4
  • 23
  • 50
  • In the bottom two examples, only the first div has `font16`. Is that by design? That way, you won't know what the second div's line-height is. – Mr Lister Dec 04 '19 at 07:53

1 Answers1

0

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>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • it's giving me negative margin instead of 10px – Temani Afif Dec 04 '19 at 09:08
  • @TemaniAfif Yes, that's right. In order to reduce the space between the lines to 10px, the margin needs to be negative. Unless I'm interpreting the picture in the question wrong, the requirement is that the vertical space between the _lowercase letters_ must be exactly 10px. – Mr Lister Dec 04 '19 at 09:15
  • @TemaniAfif It's possible that the requirement can also be fulfilled by changing the line-height instead of setting the margin, but seeing that the line-height already has !important in the stylesheet, I'm not sure that they want that to change. – Mr Lister Dec 04 '19 at 09:18
  • I guess all the snippets in his question are showing the correct behavior but he's not sure about the correct calculation to use – Temani Afif Dec 04 '19 at 09:19