Here’s something I’ve been researching recently – why is there no way to include the margins in the new CSS3 box model. The essence of the CSS3 box model is that through setting the value of the “box-sizing: ” property, you have control over how you define the “height: ” and “width: ” properties.
| Value Of Property | What It Does |
| content-box | Traditional box-model sizing. Height and width set the internal content area, and padding, border and margins get added on. |
| padding-box | Padding is included within the height and width properties. |
| border-box | Both the padding and the border are included within the height and width properties |
But unfortunately, that’s as far as it goes. There is no “margin-box” value and from what I see around the Web, no reasoning for not including it. The inclusion of this would benefit lots of developers when working with liquid layouts – ones that use percentages to lay out content.
Imagine being able to have right and left columns with percentage values that include the margins (i.e. the gap between them). Obviously there are ways around this using nested <div> tags or table cells, but wouldn’t the inclusion of this make everything that little bit easier?