Why use ems for padding & margins with browsers no

问题:

I've been wondering about this questions for some time and created a pixel version and and em version to compare the differences when zoomed in - there were none. Most of what I've read states something like "you need to make them ems for scalability" but I think it's a moot point now with all modern browsers scaling correctly. As long as you set the base font-size in your CSS to ems/rems, padding and margins written in pixels will scale accordingly as they would if they were ems. Am I missing something?

回答1:

EM (et al) units are not for view-port zooming - they are relative to the current font size. They are designed to work such that if I make my font very large (because my eyes are poor) or very small (because I am young and have the eyes of an eagle) I want the white-space around the text to scale with the text. Generally, one doesn't want 20 pt text with a 5 pixel margin between paragraphs, nor 10 pt text with a 50 pixel margin.

For example one wants text with approximately N lines of white-space between paragraphs. Using N em vertical margins achieves a spacing which adapts to the font size actually rendered.

In the modern web, em (et al) units still have their place; but they are not for everything. Essentially, you have to ask yourself, "should this size change with the font?"

Also, what if you decide to change your body-text font size? Many other layout values flow from that body-text size. Say you decide that the default browser viewing size of 16pt-18pt makes more sense than the 10pt size you are now using. If you have set the appropriate things with ems then when you increase the base everything else increases proportionately with it.