Height not adjusting with Font

HTML & CSS
1

I have the following code…

.size-0137{
    font-size: 1.37em;    
}

.size-0400{
    font-size: 4em;    
}

<div id="boxSaveTime">
    <p class='size-0137'>We saves you</p>
    <p class='size-0400'>TIME</p>
</div>

Why does the Line-Height not automatically adjust?

2

Presumably because it’s set to something fixed somewhere.

3

I just noticed that I have < body > set to line-height: 1.4em

I guess that is a bad idea, huh? (Not sure why I did that. Probably something I picked up from someone here!) :wink:

4

No, that’s OK, and won’t necessarily cause the issue you mentioned. That just makes sure all the line heights will be proportionally the same.

5

You need to set that to 1.4 (unitless) to have the line height apply proportionally, irrespective of the font size.

6

Dayam, you’re right, @technobear. I didn’t think that was the case. I thought the em unit would allow the line-height to adjust to the em size of the heading, but I were wrong. :blush: #alwaysTestFirst

2 Likes
7

I don’t understand. Please explain!

8

Don’t state a unit, no em, no %, no px, just a number.

line-height: 1.4;
1 Like
9

Why…

What does that do @TechnoBear ?

10

Unitless line heights are recommended due to the fact that child
elements will inherit the raw number value, rather than the computed
value. With this, child elements can compute their line heights based on
their computed font size, rather than inheriting an arbitrary value
from a parent that is more likely to need overriding.

11

@RyanReese,

Not sure if I follow what that is saying.

Care to follow up with an example?

12

Explained here:

13

This link has examples for you: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

1 Like
14

All about line-height in an easy slide show:

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.