0

.link {
  background-color: red;
  font-size:16px;
}

.link span {
  background-color: royalblue;
  font-size:16px;
  line-height:16px;
}
<div class="link">
    <span>textg</span>
</div>

The line-height of the container should be size of the font-size, i.e. 16px, but instead it's 18.4px. If you reduce the font-size to 15px, the line-height becomes 17.4px. Where do these 2.4px come from?

Here's a snapshot just in case.

enter image description here

happy_story
  • 1
  • 1
  • 7
  • 17
  • 2
    I think you are coming up against leading - to use an old metal printing term - a bit of space before and after a line of type. This recent article [link]https://css-tricks.com/how-to-tame-line-height-in-css/ may be relevant. – A Haworth Nov 22 '20 at 20:21

1 Answers1

4

The line-height of the container should be size of the font-size, i.e. 16px

No it's not. You never set the line-height of the parent so the default value will apply which is around 1.2. It can be different in some case but for sure bigger than 1 in all the cases so bigger than the defined font-size

Set an explicit line-height and you will get what you want:

.link {
  background-color: red;
  font-size:16px;
  line-height:1; /* or any pixel value */
}

.link span {
  background-color: royalblue;
  font-size:16px;
}
<div class="link">
    <span>textg</span>
</div>

No need to set the line-height of the inline element because it will inherit it from the parent.

Also setting the line-height to only the inline element will do nothing to its parent since you have two line-height. The one of the parent that define the minimum height of the line box and the one of the child that can only increase the line box height (beyond the minimum value) and never decrease it.

.link {
  background-color: red;
  font-size:16px;
  line-height:16px;
  margin:10px;
}

.link span {
  background-color: royalblue;
  font-size:16px;
}
<div class="link">
    <span style="line-height:0;">I will do nothing !!</span>
</div>


<div class="link">
    <span style="line-height:40px;">I will make the parent bigger</span>
</div>

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height. ref

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • So, "Tells user agents to set the used value to a "reasonable" value based on the font of the element".. this does not mean that the line-height of a block container is going to be same size as the font-size by default? The "1.2" in unitless number is relative to the font-size, correct? So, i guess that's where the discrepancy comes from. – happy_story Nov 22 '20 at 21:03
  • @Ihatecontrolfreaks yes, line-height need to be bigger than 1 (1xfont-size) to avoid having a collapse effect between lines. A smal line-height will make the different line very close so we use a *reasonable* value that will give us a good amount of space between text in different lines – Temani Afif Nov 22 '20 at 22:02
  • Okay, thanks. If i may ask one more question, a bit unrelated, but - when you want to remove the descender line space by making the img, inside a link element, a block, is that not actually an invalid code? Since technically line boxes cannot contain block-level boxes. So, while it fixes that particular issue, i am wondering if that is not actually invalid? – happy_story Nov 23 '20 at 12:28
  • @Ihatecontrolfreaks it's valid and there are rules for such case: https://stackoverflow.com/a/758491/8620333 – Temani Afif Nov 23 '20 at 12:30