CSS3 box-sizing: margin-box; Why not?

Question

Why don\'t we have box-sizing: margin-box;? Usually when we put box-sizing: border-box; in our style sheets we really mean the former.

Answer 1

Dimensions of block-level, non-replaced elements in normal flow must satisfy

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block

When over-constrained, browsers must adjust either the left or right margin. I think that means the width of the margin box must equal the width of the containing block (i.e. 100%).

For your case, transparent borders with box-sizing: border-box can work much like margins.

Answer 2

Couldn't you use width: calc(50% - 24px); for your cols? Then set your margins.

Answer 3

Perhaps set the border to 0% opacity using RGBA and use the border as a margin.

Answer 4

The guy at the top is asking about adding margin to the overall width, including padding and border. The thing is, margin is applied outside the box and padding and border aren't, when using border-box.

I have tried to achieve the border-margin idea. What I have found is that if using margin you can either add a class of .last to the last item (with margin, then apply a margin of zero, or use :last-child/:last-of-type). Or add equal margins all the way around (similar to the padding version above).

See examples here: http://codepen.io/mofeenster/pen/Anidc

border-box calculates the width of the element + its padding + its border as the total width. So if you have 2 divs which are 50% wide, they will be adjacent. If you add 8px padding to them, then you will have a gutter of 16px. Combine that with a wrapping element - which also has padding of 8px - you will have a nicely laid out grid with equal gutters all the way around.

See this example here: http://codepen.io/mofeenster/pen/vGgje

The latter is my favourite method.

Answer 5

I think we could have a box-sizing: margin-box. The css box model shows exactly, what are the positions of the margins of the frames.

There are minor problems - for example, the margin boxes can overlap - but they aren't hard to solve.

I think, the situation is the same, as we can see with the overflow-x & overflow-y combinations, with the absolut positionied divs in table-cells, with the combination of min|max-width|height with the box-sizing, and so on.

There are features, really simple features, which the browser developers simply doesn't develop.

IMHO, box-sizing: margin-box were a very useful feature. Another useful feature were the box-sizing: padding-box, it exists at least in the standard, but it wasn't implemented in any of the major browsers. Not even in the newest chrome!

---

Note: @Oriol 's comment: Firefox did implement box-sizing: padding-box. But others didn't, and it was removed from the spec. Firefox will remove it in version 50. Sad.

Answer 6

This is because the box-sizing attribute refers to the size of an element after computing the given dimension-specific values (padding, borders). "box-sizing: border-box" sets the height/width of an element and takes into consideration the padding as well as the border width. The scope of an element's margin is greater than the element itself, meaning it modifies the flow of the page and its surrounding elements, therefore directly altering the way the element fits within its parent relative to its sibling elements. Ultimately a "margin-box" attribute value would cause major problems and is essentially the same as setting the elements height/width directly.