Why should you “NEVER use height in px on anything with text inside”?

Question

In the presentation 'Maintainable CSS' by Natalie Downe, I have seen a recommendation that says:

"be afraid of heights, vertigo is healthy on the web. NEVER use height in px on anything with text inside"

Why is that?

Answer 1

I'm guessing it's due to two reasons:

1. Web documents are supposed to be fluid. What happens if you have a fixed height and you need to add or remove text later?
2. Font size can be changed by the user. Regarding why the presenter singled out pixels specifically: heights in px don't scale with the font size, while at least heights in em do.

Answer 2

1. The default layout behaviour of HTML elements is to be as high as required for their content, which is great, because it means people can put in as much content as they need. Work with the grain.

2. Browsers let people increase the font size of the web pages they’re viewing, which is great, because it means they can actually read the page comfortable without having to zoom and pan. This can result in even small amounts of text using more lines, and thus more pixels, than you expected.

Answer 3

Because you would never know who much text will be there. If you set the height in px on a div such as height: 200px, you could always add extra text to it later which will spill out of the fixed height div. Or users can change text size, or different fonts have different heights. Just any pontential reason where the contents can grow larger than the fixed heiht div.