Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use margin-box in CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

4 boxes of box size (Box dimensions)

The box size consists of four boxes, namely content box, padding box, border box and margin box. This actually corresponds to several boxes in the box model.

This is what they call it in the specification, and when the specification falls to the CSS language layer, each box has a corresponding name, as follows:

Content box is written as content-box

Padding box is written as padding-box

Border box is written as border-box

Margin box is written as margin-box.

So, in theory, box-sizing can be written in the following ways:

.box1 {box-sizing: content-box;}. Box2 {box-sizing: padding-box;}. Box3 {box-sizing: border-box;}. Box4 {box-sizing: margin-box;}

The theory is beautiful, the reality is cruel, in fact, the support is as follows:

.box1 {box-sizing: content-box;} / * default * / .box2 {box-sizing: padding-box;} / * FireFox once supported * / .box3 {box-sizing: border-box;} / * full line support * / .box4 {box-sizing: margin-box;} / * never supported * /

Margin-box was mercilessly abandoned, how miserable!

However, this is not the worst, what is worse is that margin-box has been abandoned in the whole CSS world, yes, so far, there is no attribute in CSS to support margin-box, which is much worse than padding-box, although padding-box is to be abandoned in the box-sizing attribute, but people are still favored by the background-clip attribute. But no one cares about margin-box at all.

Therefore, it is hard to avoid wondering why margin-box does not support it since they are all boxes.

Why does box-sizing not support margin-box?

There is a saying on the Internet that margin has the feature of merge and overlap in the vertical direction. If margin-box is supported, the merger rules will be changed and it will be more complicated. I don't agree with this point of view, in fact, many properties can destroy the margin merger, so why not have one more box-sizing, and it is not difficult for browser manufacturers to implement, and it does not conflict with the previous specifications.

In fact, I personally think that the biggest reason for not supporting margin-box is that it has no value! We might as well think about it, an element, if we use width or height to set the size, excuse me, when we set the margin value, will the offset size change? No, guys, if an element is 100 pixels wide, no matter how you set up margin, it's still 100 pixels wide. However, border and padding are not the same. If you set a padding value of 20 pixels for an element with a width of 100 pixels, the offsetWidth is 140 pixels and the size will change.

You say, a box that does not change the size of the element itself, does it make sense for box-sizing to support it? Box-sizing is to change the size of the rules!

This is like a menopausal aunt, is it necessary to give her contraceptive?

Margin can resize an element only when width is auto, but the element is already in a liquid state and box-sizing is not needed at all.

So, in a word, margin-box itself has no value.

Another possible reason is the use of scenario requirements. The margin-box effect of box-sizing, if it is an IE10+ browser, you can try the flex layout. If you want to be compatible with IE8+, you can use "width separation", or use "format width" in specific scenarios, that is, it is not a strong requirement. Box-sizing:padding-box, for example, is supported by FireFox browsers because of its limited usage scenarios, and it was once supported, and it has not been supported since version 50.

In fact, I personally feel that there is no need to give up, browsers should support it, just like the background attribute. It's not good to be a set meal.

Why does background-origin/background-clip not support margin-box?

In fact, this is easy to explain. The big words "the background of margin is always transparent" are clearly written in the specification!

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

If, for example, background-clip supports margin-box, does it mean that background colors and background images can be displayed on the margin-box box? doesn't that mean that "the background of margin is not transparent"! Obviously in conflict with the norms, we can hit ourselves in the face, but if we want the norms to hit ourselves in the face, is it possible?

The above is all the contents of the article "how to use margin-box in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.