What is this CSS in bootstrap doing?

Question

So I have some Jquery UI draggable span elements that, after adding Bootstrap 3.0 to my website have shrunk in height, this is a problem because they are part of a document tagging/positioning app of mine and need to stay the same height. I found the culprit to be:

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

In Bootstrap.css. If I comment out -webkit-box-sizing: border-box;, box-sizing: border-box; or -moz-box-sizing: border-box; individually my problem persists, but if comment out this entire style the height of my draggable elements return to their original height.

I can override this style like so to restore the height of my ui-draggable span elements:

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

What is the difference between content-box and border-box?

ajp15243 ajp15243 · Accepted Answer · 2013-11-19T19:26:16

The CSS box-sizing rule determines how an element's dimensions are computed, with width and height taking on different meanings depending on the value. Basically, it modifies the CSS box model.

content-box is default, and means "don't include padding or border in the values of width and height".

If you set it to border-box, it's the opposite; your padding and border sizes will be collapsed into the element's dimensions. Note that margin will not be (there is no margin-box value, so margin is always outside of an element's dimensions). For example, setting

width: 200px;
padding: 0 20px;

will mean that 40px (20px + 20px) of that 200px width will be consumed for the margin/padding, and only 160px will be left for content width. With content-box, the content width would take up all 200px of your width rule, and the padding would be added outside of the element's content as normal.

The likely reason behind the shotgun approach you found (setting box-sizing: border-box; on *, *:before, *:after) is because some people have found that box-sizing: border-box; is more intuitive than the default content-box value, as you know you will always have an element of the specified dimension (width/height) for layout purposes, no matter what padding or border sizes you have (margin will still affect layout). This view has been popularized by Paul Irish in this blog post of his.

Note that the other rules in there are simply the vendor-specific rules, for versions of those vendors' browsers that didn't yet support the standard box-sizing rule.

What is this CSS in bootstrap doing?

2 Answers