填充高度/边距/边框的百分比可以比em更好吗？

Question

What are good and recommended uses of percentage values for vertical CSS declarations?

In other words, under responsive design, are we overlooking something where % would be beneficial over em?

Because it seems that for most situations (except for cases where you want all sides equal; credit ), em would be better served than % , consider:

Using percentages for the horizontal values of padding, margin or border of elements in CSS is fairly standard — especially in responsive web design. For example, take margin-left: 7.2% and padding: 0 5% . It also makes sense: the wider the screen, then the space will increase proportionally.

One can do the same for the vertical values:

margin-top: 5%;
padding: 10% 0;
border: 1% 0 2% 0;

As expected, an increasing viewport width will increase the corresponding vertical spaces.

However, in the cases I've come across, it can look a bit odd — unfitting to the design. It seems that em values may be better served.* But, on the other hand, where would it be beneficial to use percentages?

_{* Since these won't increase with the width of the screen, but will increase according to the font size of the page.}

Answer 1

I don't think there's any right or wrong answers to this question. It really does depend on your design.

As you noted, % values, even on vertical-based properties on margin & padding, are still relative to the width of the document. So if your design requires even padding, then % values all round are great.

But, if the design is content oriented, and you're still using % values on the horizontal properties for responsive design, % might not be the best for the vertical properties. You may, for example, want the padding-top to be exactly the height of 1 line of text. So you'd use ems .

But I digress; it really does depend on your design and personal preference.

Answer 2

Yes, depending on the situation just like any other css practice.

Say you have a container div that uses 100% of the screen height and you have a header you want to appear at the top of your div. You could say margin-top: 15px on your header, which works, but then if I come and view it on my phone it will look very squished.

So instead you say margin-top: 10% then no matter what screen I come and view your site on your header is always 10% from the top of the div. which means the relative flow of your layout will always be the same.

The general rule is this: For any valid css you can write there is a use-case where it would be the best way to go about achieving your design goal. Forget anyone who says "Never use negative margins" or "always avoid absolute positioning" or any of the other crap they throw around.

Answer 3

I have been pondering this question as well recently and after reading around the internet the 'rule of thumb' I'm beginning to lean on is as follows. First, the reason why % is good responsive design for the horizontal axis is because as we all know the width of your browser can vary greatly depending whether the user is on a phone or computer. The vertical axis is different however because while it can also vary like the horizontal axis, many webpages are created for a vertical scroll and the user is expecting to scroll down. In such cases a little more vertical scrolling due to less responsive ems is fine.

To answer your question based on that assumption, a time in which you would use % for the vertical margin is when you have a design where you don't want to make the user scroll much to see a part of the page. Specific examples might be a single-page web app where you don't want any scrolling or a header or initial page content such as a picture that you would want the user to see in its entirety without having to scroll down.