CODEWITHSUNDEEP
cssfont-size
youfu
youfu

Reputation: 1627

How does height:auto interact with line-height:0 and different font-size

HTML:

<div>
  <span>Some text here...</span>
</div>

CSS:

div {
    line-height: 0;
}

The div gets height: 0 in this circumstance.

However, when I specify a larger font-size like

span {
    font-size: 100px;
}

Although there's line-height: 0, the div gets a non-zero height.

You can check the demo at https://jsfiddle.net/cjvpLfv2/

EDIT: add one more demo at https://jsfiddle.net/cjvpLfv2/12/

If I apply font-size: 100px to both span and div, the div gets height: 0px again

My question is how does height: auto interact with line-height and font-size in this simple situation (a block-level container with only one inline element)

Upvotes: 5

Views: 2201

Answers (3)

Anne
Anne

Reputation: 21

This answer is a bit late, but your question intrigued me so I decided to play around with it. After some time, I discovered the answer is actually pretty simple:

The height of div is equal to the line-height.

The reason why your line-height becomes non-0 is because you have different font-sizes. It doesn't matter that this size difference is between div and span, you could have 2 different font-sizes within the span element. The point is that as soon as you have 2 different font-sizes the line-height becomes non-0.

I don't know the exact formula, but it seems based upon the difference in size, more specifically the difference in distance between the middle of both sizes. You'll see that the bottom and top border of div will align with the middle of the smallest and largest font-size respectively.

You can easily demonstrate this by adding AaGg between the opening div and span tag of your second block of html code, as such:

<div>AaGg
<span class=big-font-size>AaGg</span>AaGg
</div>

I don't know why or the exact details of computation, but this newly calculated line-height basically overrides your specified line-height: 0;

Upvotes: 2

Frank N
Frank N

Reputation: 10396

1) Font-size dictates the line-height. If nothing is defined, the normal factor for line-height seems to be 1.2.

2) Line height dictates automatic box height, irrespective of font size. (In many cases, people don't define line height, thus essentially “font-size plus a fudge factor” determine box height, which appears natural). Update: Of course, that's what's type inside demands. Demands of boxes come on top. (And, inline or not, space is a box...). Frank-ly, I still miss a piece of the puzzle.

3) If you use font-size 0 and line height 100, I do get a zero-height box:

<div style='font-size:100px; line-height: 0'>
  <span>Some</span>
</div>

see codepen here (last box has your use case). Box 4 to 6 proves point (2).

The line-height you get has to do with giving part of the styling to the inner <span>, not the <div>. See here.

Upvotes: 0

KWeiss
KWeiss

Reputation: 3144

Even though the line-height CSS style is 0 on all elements, including the span elements, it appears to be displayed differently in the browser. I've tried to add multiple lines to the spans, and the height of the outer div multiplies accordingly:

https://jsfiddle.net/cjvpLfv2/4/

So it seems that the browser does not allow a line-height of 0 for large font-sizes. The font-size where line-height goes above 0 appears to be 17px in Chrome.

If you set the spans' display property to inline-block, the lines no longer stack, but the line-height remains:

https://jsfiddle.net/cjvpLfv2/6/

If you set the spans' display property to block, line-height: 0 is applied as expected:

https://jsfiddle.net/cjvpLfv2/7/

I haven't found any documentation for this behavior, and the box-model page on mdn just claims that:

for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property

Upvotes: 0

Related Questions