# \* { box-sizing: border-box } FTW

DevFeed: [\* { box-sizing: border-box } FTW](<https://devfeed.tech/articles/box-sizing-border-box-ftw-21670.md>)

Original publisher: [Read original article](<https://paulirish.com/2012/box-sizing-border-box-ftw/>)

Author: Paul Irish

Published: 2012-02-01T17:11:00Z

Content type: article

Language: en

Sources: [Paul Irish](<https://devfeed.tech/sources/paul-irish.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [browser](<https://devfeed.tech/topics/browser.md>), [WebKit](<https://devfeed.tech/topics/webkit.md>), [polyfill](<https://devfeed.tech/topics/polyfill.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [layout](<https://devfeed.tech/tags/layout.md>), [padding](<https://devfeed.tech/tags/padding.md>), [polyfill](<https://devfeed.tech/tags/polyfill.md>)

## AI overview

This article recommends applying a natural border-box sizing model to all elements by setting box-sizing on html and inheriting it through elements and pseudo-elements. It explains how this keeps declared widths stable when padding is added, discusses browser support and required prefixes for older Firefox, iOS, and Android versions, and notes compatibility with jQuery, Chrome DevTools, and mobile devices.

## Source excerpt

One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand. Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model. Jeff Kaufman also dove into the history Anyway, I have a recommendation for your CSS going forward: 1 2 3 4 5 6 7 /* apply a natural box layout model to all elements, but allowing components to change */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } Update August 2014: This code was updated to match new box-sizing best practices. Also prefixes are pretty much dead. This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise. Browser support Due to browser support, this recommendation is only for projects that support IE8 and up. (Full browser compat at MDN) Firefox <= 28 still needs the -moz- prefix, and <= iOS4, Android <= 2.3 need the -webkit-, but everyone else uses the unprefixed. You can find more info about a box-sizing polyfill for IE6 & 7 at html5please.com/#box-sizing (which was developed with * { box-sizing: border-box!). Is it safe to use? Totally. jQuery works pretty great with it (except this). As mentioned, browser support is excellent. And a number of projects use this layout model by default, including the WebKit Web Inspector (aka Chrome DevTools). I heard from Dutch front-end developer Yathura Thorn on his experience: We've