CSS percentage margin & amp; padding, css percentage margin

CSS percentage: margin & padding; css percentage: margin

Some time ago, my colleagues seemed to have some misunderstandings about the percentage values of the margin and padding applications, and thought it might be a common problem. Therefore, I think it is necessary to write them separately.

Both margin and padding can use percentage values, but one thing may be different from the general idea, that is, the percentage value of margin-top | margin-bottom | padding-top | padding-bottom is not the container height, but the width.

Reference Standard (2.1) original expression:

 

The percentage is calculated with respect to the width of the generated box's containing block. note that this is true for 'margin-top' and 'margin-bottom' as well. if the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

The percentage is calculated with respect to the width of the generated box's ining block, even for 'padding-top 'and 'padding-bottom '. if the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

 

There is no doubt about the width reference width, but the height reference is also the width, which may be different from the general idea, because after all, the height application percentage reference is still the container height.

There are several common explanations on why standards should be defined in this way. Let's take a look at them (personal. Since padding is similar to margin, we will only use padding-top as an example below.

The first statement is that if padding-top is based on the container height, the sub-element application padding value will continue to increase the container height, the changes in container height will in turn continue to affect the padding-top of sub-elements, and fall into an infinite loop.

This is true for containers with variable heights, but it is not true for containers with fixed heights. This is similar to height, which is why the height container must determine the height. That is to say, if padding-top needs to refer to the container height, it must be processed in the same way as height.

The second rule is more reliable,To keep the four values of padding (margin) Uniform.

The value of padding (margin) remains the same for all four values regardless of the metering method referenced. Is it a separate case for percentage activation? Based on the Multi-scenario processing in the first article, if the standard definition of padding-top references the container height, I am afraid to list at least four exception notes-which is not good for anyone :)

In fact, the width of the vertical padding reference body is also very useful. Although the percentage value in the early-stage solid pixel design should hardly be used in padding or margin, the percentage is gradually sparse as the mobile Adaptive Layout requires. For example, you can use background-sizing to maintain the background Ratio and media query to adjust the corresponding spacing. These applications are based on the fact that:Whether vertical or horizontal, percentage values always reference width.

Width is actually the soul of adaptive and modern web design.