css - Why did Bootstrap 3 switch to box-sizing: border-box?

Question

I'm migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously.

Seems a bit radical imho :-)

Anyone care to give some insight?

Answer 1

The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)

Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.

Personally I think most benefits go to the grid system. In Twitter's Bootstrap all grids are fluid. Columns are defined as percentage of the total width. But the gutter have a fixed width in pixels. By default a padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. With border-box this calculating is easy because the border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. (http://css-tricks.com/box-sizing/)

Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/