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?
I'm guessing it's due to two reasons:
px
don't scale with the font size, while at least heights in em
do.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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With