CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Alexander Solonik
Alexander Solonik

Reputation: 10240

Why set box-sizing: content-box; on a singular element?

I was just going through the bootstrap.css file and came across the following lines of code : 

hr {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}

I have one single question and one question only, why the explicit box-sizing: content-box; when the entire document has its box-sizing: box-border;? Why would you switch one singular element to box-sizing: content-box; ?

The example I have provided is only one instance of the box-sizing of an element being set to box-sizing: content-box;, I have seen this being done a lot of times in CSS style sheets and fail to ever seen the practicality of such styling.

Why might adding a box-sizing: content-box; to a singular element be useful? Would someone provide a practical example ?

Upvotes: 3

Views: 1189

Answers (3)

DLH
DLH

Reputation: 565

The content-box setting makes more sense when you consider that it is paired with height:0. If an element had height:0 and box-sizing:border-box, that would mean that the hr had to have zero height, even including borders. In other words, it would be invisible. Content-box, on the other hand, means that the border is not counted as part of the height, so a border can still be visible even with height 0.

Styling hr elements is notoriously inconsistent across browsers, and they apparently decided to normalize the height to 0 to eliminate some inconsistency. By extension, that probably also means that they intended hr elements to be styled with the border property. Granted, that decision by itself strikes me as a bit odd since I thought that Opera didn't respect borders on hr very well. So while I'm not sure it makes perfect sense to me either, it's not every bit as strange as it might look at first.

Upvotes: 4

Steve Sanders
Steve Sanders

Reputation: 8651

If we look at the Bootstrap source Less files, we see that these lines of CSS actually comes from the normalize.css project. The goal of normalize.css is to create a consistent CSS base across browsers. I found a commit from a few years ago where this CSS was added. The explanation for that commit states:

Firefox uses different box-sizing and height values to all other browsers. Firefox doesn't currently support box-sizing without the -moz- prefix, so we use both the vendor-prefixed and unprefixed properties to ensure that it matches the content-box value of other browsers. It also requires the height to be set to 0.

That commit then links to issue #133 which states:

The box-sizing of the HR element is set to border-box in latest Firefox (15) while it is set to content-box in Chrome (22), Opera (12), Safari (5.1), IE9 and IE8.

So, it sounds like this was introduced to explicitly make the box-sizing of the hr element consistent across browsers. In the context of the Bootstrap project, this is probably unnecessary since Bootstrap is already providing consistency by setting all elements to box-sizing: border-box.

Upvotes: 6

Ryan Neuffer
Ryan Neuffer

Reputation: 792

That code you referenced in bootstrap actually comes from Normalize.css https://necolas.github.io/normalize.css/:

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

The documentation is limited to, "Address differences between Firefox and other browsers." That said, box-sizing: border-box forces the height and width values to include both padding and border. Firefox uses borders to render the line you see when using the hr tag. If box-sizing: border-box; and height: 0; are used in conjunction you would see nothing in FF, unlike other browsers.

Upvotes: 2

Related Questions