This will not give us a box that is 50% of its parent. It will actually render an
element that is 50% of the parent’s width plus 12 pixels (2-pixel border + 10-
pixel padding). You could set the padding as a percentage value (although
not for input elements in Firefox!), but adding percentage values of widths to
the pixel values of borders can cause mathematical problems.
There are two ways to ﬁx this problem. The ﬁrst is to use the new CSS3
box-sizing property, and setting it to border-box:
border 1px solid #000;
padding: 0 5px;
This new CSS3 panacea eﬀectively tells the browser to render the element
at the speciﬁed width, including the border width and padding.
The second way to ﬁx this problem is to use ﬂexbox.
MANY PROBLEMS, MANY SOLUTIONS
The W3C responded with a suite of answers: the ﬂexible box model,
columns, templates, positioned ﬂoats and the grid. Adobe added regions to
the mix, but they are not yet supported by any browser.
The display property already has no less than a staggering 16 values:
inline, block, list-item, inline-block, table, inline-table,
table-row-group, table-header-group, table-footer-group,
table-row, table-column-group, table-column, table-cell,
table-caption, none and inherit.
And now we can add a 17th: box.
Smashing eBook #19│Mastering CSS3│ 152