开发者

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

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 o开发者_如何学编程n anything with text inside"

Why is that?


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.


  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.


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.


Another tiny reason is that different browsers and operating systems render fonts differently (which affects the size), which makes it hard for the user to predict how big the text container needs to be.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜