Oops Try Again Make Sure That You Use the Universal Selector to Give a Border 1px Wide

The box-sizing property tin brand building CSS layouts easier and a lot more intuitive. It's such a boon for developers that here at CSS-Tricks we find International Box-Sizing Awareness Twenty-four hours in February.

But, how is information technology so helpful and honey that information technology deserves its ain internet holiday? Time for a trivial bit of CSS history.

Box Model History

Since the dawn of CSS, the box model has worked like this by default:

width + padding + border = actual visible/rendered width of an element's box

height + padding + edge = actual visible/rendered elevation of an chemical element's box

This can exist a little counter-intuitive, since the width and pinnacle you set for an element both get out the window every bit shortly equally you get-go adding padding and borders to the element.

Back in the onetime days of web design, early versions of Internet Explorer (<= IE6) handled the box model differently when information technology was in "quirks style". The "quirks" box model worked like this: width = bodily visible/rendered width of an element's box summit = actual visible/rendered height of an element's box The edge and padding values were moved inside the element's box, cutting into the width/superlative of the box rather than expanding it.

The box at the top shows the default box model. The box at the lesser shows what was once the "quirks mode" interpretation of the box model.

Some people preferred this "quirky" estimation of the box model and considered information technology more intuitive. It's a valid point. Having the bodily visible width of a box turn out differently from what you alleged in the CSS is a flake mind bending.

But, in the days of stock-still-width design, it wasn't especially complicated to piece of work with the default box model once y'all understood it. You could do a bit of arithmetic to figure out how many pixels y'all needed to trim off of an chemical element'due south declared width or height to accommodate its padding and border. The problem for nowadays-day developers is that those absolute pixel lengths don't translate to responsive design, so the same math doesn't apply anymore.

As responsive design (or, equally information technology was in one case known, "fluid" or "liquid" layout) started to gain popularity, developers and designers wished for an update to the box model. The great designer Jon Hicks, known for his first-class fluid width designs, had this to say on the subject in the CSS Wishlist we put together in 2008:

I would love a different box model! I detect it baroque that padding and border add together the width of an object, and would love to be able to requite something like a textarea 100% width and 3px padding without worrying what it's going to practice the layout. Perhaps something like padding-inside as a new selector?

In that vein I also wish I could specify a 100% width for an element, minus a prepare stock-still width. Once more, very useful when creating fluid designs with class elements!

Present-Solar day box-sizing

Those wishes were granted when the box-sizing property was introduced in CSS3. Though box-sizing has 3 possible values (content-box, padding-box, and border-box), the well-nigh popular value is border-box.

Today, the current versions of all browsers employ the original "width or height + padding + border = actual width or tiptop" box model. With box-sizing: border-box;, nosotros can modify the box model to what was once the "quirky" way, where an chemical element'southward specified width and pinnacle aren't affected past padding or borders. This has proven and then useful in responsive pattern that information technology'southward found its way into reset styles.

At this bespeak you may be asking yourself, "Is it possible that Old IE did something correct?" Plenty of people think so.

Demo

This demo shows how border-box can help make responsive layouts more manageable. The parent div's width is 50%, and it has 3 children with different widths, padding, and margins. Click the edge-box button to get all the children in the right place inside the parent.

See the Pen Box Sizing Layout Demo by CSS-Tricks (@css-tricks) on CodePen.

Practiced, Better, and (Probably) Best box-sizing Reset Methods

The "Old" edge-box Reset

The primeval box-sizing: border-box; reset looked like this:

          * {   box-sizing: border-box; }        

This works fairly well, but information technology leaves out pseudo elements, which tin can lead to some unexpected results. A revised reset that covers pseudo elements chop-chop emerged:

Universal Box Sizing

          *, *:before, *:later on {   box-sizing: border-box; }        

This method selected pseudo elements equally well, improving the normalizing effect of edge-box. Simply, the * selector makes it difficult for developers to apply content-box or padding-box elsewhere in the CSS. Which brings us to the electric current frontrunner for best practice:

Universal Box Sizing with Inheritance

          html {   box-sizing: border-box; } *, *:before, *:later on {   box-sizing: inherit; }        

This reset gives you more flexibility than its predecessors — yous can employ content-box or padding-box (where supported) at volition, without worrying about a universal selector overriding your CSS. We went into more depth on this technique and the reasoning backside it in "Inheriting box-sizing Probably Slightly Ameliorate Best Practice". One potential gripe with it is that box-sizing isn't normally inherited, and then it's specialized behavior, not quite the same as something you'd commonly put in a reset.

Vendor Prefixes

Every current browser supports box-sizing: border-box; unprefixed, then the need for vendor prefixes is fading. Simply, if y'all need to support older versions of Safari (< 5.ane), Chrome (< x), and Firefox (< 29), you lot should include the prefixes -webkit and -moz, like this:

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

Known Issues

box-sizing: border-box; is supported in the current versions of all major browsers. The less-commonly used padding-box is only supported in Firefox at the moment. There'south more comprehensive information nigh browser support in our box-sizing annual entry.

There are a few bug with older versions of Internet Explorer (8 and older). IE viii doesn't recognize border-box on elements with min/max-width or min/max-height (this used to affect Firefox likewise, but information technology was fixed in 2012). IE 7 and below do non recognize box-sizing at all, but in that location'due south a polyfill that tin aid.

holmesanocand.blogspot.com

Source: https://css-tricks.com/box-sizing/

Share this post