How to include descender height in automatic height calculation?

Question

With line-height: 1 the descenders on the font will overflow the automatic height.

Here is a sample:

body{
  line-height: 1;
  font-size: 50px;
}
div{
  overflow: auto;
}

<html>

<body>
  <div>
    <a href="">gqpy</a>
  </div
</body>

</html>

I could use How to calculate descender height in javascript? to calculate the height and add padding manually, but I would like to use a pure CSS solution if it's possible.

The problem still shows up without the anchor element, it just makes it easier to see the problem. — taha51595, Apr 06 '16 at 19:14
there is not "space for the underline". The baseline is the line on which most letters like k, m, a etc. are placed, however, there are letters like g, j, p etc. that go below the baseline, and they need this space. The `line-height` measures the height from the very lowest possible point to the very highest point any letter of the alphabet can possibly reach. — Johannes, Apr 06 '16 at 21:23
That makes more a lot more sense. So the space is left for those letters. I can see it now on http://codepen.io/anon/pen/xVpRYy. I think I can find a way to fix it now. — taha51595, Apr 07 '16 at 14:27

Vincent G · Answer 1 · 2016-04-06T19:38:25.827

0

Is is what you mean ?

ul { padding-left: 0}
li { list-style-type: none;  }
a {font-size: 70px; }

Remove the overflow: auto; on the ul style and you will not have a scrollbar on links.

edited Apr 06 '16 at 19:38

answered Apr 06 '16 at 18:38

Vincent G

That just makes it take longer to show up. If you bump the font-size up to 30px the scrollbar appears. – taha51595 Apr 06 '16 at 18:51
Ok, now I see more clearer what you wants. Just edited my answer – Vincent G Apr 06 '16 at 18:56
line-height: 1 is part of the reset.css from http://meyerweb.com/eric/tools/css/reset/. It is there to help standardize css defaults between browsers. The height on the li element is correct. The problem is that the anchor element has space for text-decoration causing the overflow. – taha51595 Apr 06 '16 at 19:07
Ok then remove the `overflow: auto;` on the `ul` element : http://codepen.io/anon/pen/EKoYgL – Vincent G Apr 06 '16 at 19:11

1 Answers1