{"id":7323,"date":"2010-09-10T06:24:46","date_gmt":"2010-09-10T13:24:46","guid":{"rendered":"http:\/\/css-tricks.com\/?p=7323"},"modified":"2015-05-06T12:00:05","modified_gmt":"2015-05-06T19:00:05","slug":"box-sizing","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/box-sizing\/","title":{"rendered":"Box Sizing"},"content":{"rendered":"

The box-sizing<\/a><\/code> property can make building CSS layouts easier and a lot more intuitive. It’s such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day<\/a> in February.<\/p>\n

But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history.<\/p>\n

Box Model History<\/h3>\n

Since the dawn of CSS, the box model<\/a> has worked like this by default:<\/p>\n

width + padding + border = actual visible\/rendered width of an element’s box<\/p>\n

height + padding + border = actual visible\/rendered height of an element’s box<\/p>\n

This can be a little counter-intuitive, since the width and height you set for an element both go out the window as soon as you start adding padding and borders to the element.<\/p>\n

Back in the old days of web design, early versions of Internet Explorer (<= IE6) handled the box model differently when it was in \"quirks mode\". The \"quirks\" box model worked like this:\n\nwidth = actual visible\/rendered width of an element's box\n\nheight = actual visible\/rendered height of an element's box\n\nThe border and padding values were moved inside the element's box, cutting into the width\/height of the box rather than expanding it.\n\n\n\n

\"\"
The box at the top shows the default box model. The box at the bottom shows what was once the “quirks mode” interpretation of the box model.<\/figcaption><\/figure>\n

Some people preferred this “quirky” interpretation of the box model and considered it more intuitive. It’s a valid point. Having the actual visible width of a box turn out differently from what you declared in the CSS is a bit mind bending. <\/p>\n

But, in the days of fixed-width design, it wasn’t particularly complicated to work with the default box model once you understood it. You could do a bit of arithmetic to figure out how many pixels you needed to trim off of an element’s declared width or height to accommodate its padding and border. The problem for present-day developers is that those absolute pixel lengths don’t translate to responsive design, so the same math doesn’t apply anymore.<\/p>\n

As responsive design (or, as it was once 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<\/a>, known for his excellent fluid width designs, had this to say on the subject in the CSS Wishlist<\/a> we put together in 2008:<\/p>\n

\n

I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to be able to give something like a textarea 100% width and 3px padding without worrying what it\u2019s going to do the layout. Perhaps something like padding-inside as a new selector?<\/p>\n

In that vein I also wish I could specify a 100% width for an element, minus a set fixed width. Again, very useful when creating fluid designs with form elements!<\/p>\n<\/blockquote>\n

Present-Day box-sizing<\/code><\/h3>\n

Those wishes were granted when the box-sizing<\/code> property was introduced in CSS3. Though box-sizing<\/code> has three possible values (content-box<\/code>, padding-box<\/code>, and border-box<\/code>), the most popular value is border-box<\/code>.<\/p>\n

Today, the current versions of all browsers use the original “width or height + padding + border = actual width or height” box model. With box-sizing: border-box;<\/code>, we can change the box model to what was once the “quirky” way, where an element’s specified width and height aren’t affected by padding or borders. This has proven so useful in responsive design that it’s found its way into reset styles.<\/p>\n

At this point you may be asking yourself, “Is it possible that Old IE did something right?” Plenty of people think so<\/a>.<\/p>\n

Demo<\/h3>\n

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

See the Pen Box Sizing Layout Demo<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

Good, Better, and (Probably) Best box-sizing<\/code> Reset Methods<\/h3>\n

The “Old” border-box<\/code> Reset<\/h4>\n

The earliest box-sizing: border-box;<\/code> reset looked like this:<\/p>\n

* {\r\n  box-sizing: border-box;\r\n}<\/code><\/pre>\n
This works fairly well, but it leaves out pseudo elements, which can lead to some unexpected results. A revised reset that covers pseudo elements quickly emerged:<\/p>\n
Universal Box Sizing<\/h4>\n
*, *:before, *:after {\r\n  box-sizing: border-box;\r\n}<\/code><\/pre>\n
This method selected pseudo elements as well, improving the normalizing effect of border-box<\/code>. But, the *<\/code> selector makes it difficult for developers to use content-box<\/code> or padding-box<\/code> elsewhere in the CSS. Which brings us to the current frontrunner for best practice:<\/p>\n
Universal Box Sizing with Inheritance<\/h4>\n
html {\r\n  box-sizing: border-box;\r\n}\r\n*, *:before, *:after {\r\n  box-sizing: inherit;\r\n}<\/code><\/pre>\n
This reset gives you more flexibility than its predecessors — you can use content-box<\/code> or padding-box<\/code> (where supported) at will, without worrying about a universal selector overriding your CSS. We went into more depth on this technique and the reasoning behind it in “Inheriting box-sizing<\/code> Probably Slightly Better Best Practice”<\/a>. One potential gripe with it is that box-sizing<\/code> isn’t normally inherited, so it’s specialized behavior, not quite the same as something you’d normally put in a reset.<\/p>\n
Vendor Prefixes<\/h3>\n
Every current browser supports box-sizing: border-box;<\/code> unprefixed, so the need for vendor prefixes is fading. But, if you need to support older versions of Safari (< 5.1), Chrome (< 10), and Firefox (< 29), you should include the prefixes -webkit<\/code> and -moz<\/code>, like this:<\/p>\n
html {\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n}\r\n*, *:before, *:after {\r\n  -webkit-box-sizing: inherit;\r\n  -moz-box-sizing: inherit;\r\n  box-sizing: inherit;\r\n  }<\/code><\/pre>\n
Known Issues<\/h3>\n
box-sizing: border-box;<\/code> is supported in the current versions of all major browsers. The less-commonly used padding-box<\/code> is only supported in Firefox at the moment. There’s more comprehensive information about browser support in our box-sizing<\/a><\/code> almanac entry.<\/p>\n
There are a few issues with older versions of Internet Explorer (8 and older). IE 8 doesn’t recognize border-box<\/code> on elements with min\/max-width<\/code> or min\/max-height<\/code> (this used to affect Firefox too, but it was fixed in 2012<\/a>). IE 7 and below do not recognize box-sizing<\/code> at all, but there’s a polyfill that can help<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
The box-sizing property can make building CSS layouts easier and a lot more intuitive. It’s such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February. But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history. […]<\/p>\n","protected":false},"author":33562,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[19,4],"tags":[478],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":333756,"url":"https:\/\/css-tricks.com\/exploring-the-complexities-of-width-and-height-in-css\/","url_meta":{"origin":7323,"position":0},"title":"Exploring the Complexities of Width and Height in CSS","date":"February 5, 2021","format":false,"excerpt":"The following article is co-authored by Uri Shaked and Michal Porag. Let\u2019s explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night hours debugging and fiddling with lots of combinations of CSS properties, reading though the specs, and trying to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/steps.png?fit=875%2C656&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":161608,"url":"https:\/\/css-tricks.com\/international-box-sizing-awareness-day\/","url_meta":{"origin":7323,"position":1},"title":"International box-sizing Awareness Day","date":"February 1, 2014","format":false,"excerpt":"It's February 1st today, which I've decided to declare International box-sizing Awareness Day. In honor of, you guessed it, the most humble and undersung, yet awesome and useful CSS property: box-sizing. The date corresponds to Paul Irish's post where he introduced the concept of using it on every single element\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333130,"url":"https:\/\/css-tricks.com\/new-in-chrome-88-aspect-ratio\/","url_meta":{"origin":7323,"position":2},"title":"New in Chrome 88: aspect-ratio","date":"January 20, 2021","format":false,"excerpt":"And it was released yesterday! The big news for us in CSS Land is that the new release supports the aspect-ratio property. This comes right on the heels of Safari announcing support for it in Safari Technology Preview 118, which released January 6. That gives us something to look forward\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/chrone-aspect-ratio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339203,"url":"https:\/\/css-tricks.com\/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal\/","url_meta":{"origin":7323,"position":3},"title":"Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal","date":"May 10, 2021","format":false,"excerpt":"I recently came across an interesting problem. I had to implement a grid of cards with a variable (user-set) aspect ratio that was stored in a --ratio custom property. Boxes with a certain aspect ratio are a classic problem in CSS and one that got easier to solve in recent\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/hello-gorgeous.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331423,"url":"https:\/\/css-tricks.com\/simulating-drop-shadows-with-the-css-paint-api\/","url_meta":{"origin":7323,"position":4},"title":"Simulating Drop Shadows with the CSS Paint API","date":"December 29, 2020","format":false,"excerpt":"Ask a hundred front-end developers, and most, if not all, of them will have used the box-shadow property in their careers. Shadows are enduringly popular, and can add an elegant, subtle effect if used properly. But shadows occupy a strange place in the CSS box model. They have no effect\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/houdini.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":326412,"url":"https:\/\/css-tricks.com\/how-to-add-text-in-borders-using-basic-html-elements\/","url_meta":{"origin":7323,"position":5},"title":"How to Add Text in Borders Using Basic HTML Elements","date":"December 1, 2020","format":false,"excerpt":"Some HTML elements come with preset designs, like the inconveniently small squares of  elements, the limited-color bars of  elements, and the \u201csomething about them bothers me\u201d arrows of the 
 elements. We can style them to match the modern aesthetics of our websites while making use of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/border-text-fieldset-legend.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7323"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/33562"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=7323"}],"version-history":[{"count":23,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7323\/revisions"}],"predecessor-version":[{"id":201761,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7323\/revisions\/201761"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=7323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=7323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=7323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}