title: CSS3 box-sizing: margin-box; Why not?
body: <p>Why don't we have <code>box-sizing: margin-box;</code>? Usually when we put <code>box-sizing: border-box;</code> in our style sheets we really mean the former.</p>
  
  <p><br>
  <strong>Example:</strong></p>
  
  <p>Let's say I have a 2 column page layout. Both columns have a width of 50%, but they look kind of ugly because there's no gutter (gap in the middle); Below is the CSS:</p>
  
  <pre><code>.col2 {
      width: 50%;
      float: left;
  }
  </code></pre>
  
  <p><br>To apply a gutter you might think we could just set a right margin on the first of the 2 columns; something like this:</p>
  
  <pre><code>.col2:first-child {
      margin-right: 24px;
  }
  </code></pre>
  
  <p>But this would make the second column wrap onto a new line, because the following is true:</p>
  
  <pre><code>50% + 50% + 24px &gt; 100%
  </code></pre>
  
  <p><code>box-sizing: margin-box;</code> would solve this issue by including margin in the calculated width of the element. I would find this <em>very</em> useful if not more useful than <code>box-sizing: border-box;</code>.</p>