LearnTake Control of the Box Model with box-sizing

Guil Hernandez
writes on February 18, 2013

Share with your friends


I get asked a lot about the CSS box-sizing property, especially from beginning designers and developers who’ve dealt with broken layouts and misaligned grids. The CSS box model can be a little deceiving and tricky to work with at times, so first, it’s important to understand how it works in order to better appreciate the wonders of box-sizing.

In this article, we’ll go over a few important things to know about the box model, like how it affects defining accurate fixed and fluid sizes, then learn how to tame it with the new box-sizing feature.

The Traditional Box Model

The “traditional” CSS box model, once implemented in Netscape 4 and IE 4-5, counted borders and padding as part of the width and height of a box, which at the time did not match the W3C’s standard. So when browsers started moving closer to standards compliance, it threw a monkey wrench into the development process. IE6 later developed backwards compatibility for it with Quirks Mode.

Looking back, the “IE box model” might have been something early versions of IE got right from the beginning.

The Current Box Model

The current, standard CSS box model lays out and draws padding and borders outside the width and height of the content area by adding the border-width and padding to the size of the box.

It might as well be called the content-box model because the width or height we specify is only given to the content area of the box, excluding padding and borders. Because of this, a width and height are actually rendered as:

width + padding-left + padding-right + border-left-width + border-right-width = total rendered box width

height + padding-top + padding-bottom + border-top-width + border-bottom-width = total rendered box height

This can be an issue, especially when developing the layout of a page. For example:

.box {
   width: 300px;
   padding: 20px;


The width of .box is now increased by 40px because an additional 20px of padding has been applied to each side. So it actually renders 340px wide. The same happens when a border is applied:

.box {
   width: 300px;
   padding: 20px;
   border: 10px solid #478D93;

border and padding

Now 20 additional pixels have been tacked on the total width –– 10px on each side. Things get even more perplexing when defining sizes in percentages:

See the Pen FyCcr by Treehouse (@Treehouse) on CodePen.

How Can We Fix This?

We could do a little math and subtract the border widths and padding from the specified width. But that can be tedious and it isn’t a bulletproof solution. We could also maybe use calc(), a new CSS function that calculates the size and shape of elements.

But again, do we really want to be concerned with more math every time we want to define a flexible width? Let’s leave the math for those px to em / percentage conversions.

So then, what do we do if we need the element to be exactly the width we specified?

An easier, more precise and battled-tested way to solve this is with the box-sizing feature, which gives us the ability to alter the way width and height are calculated.

The Magic Value

The value border-box forces the padding and borders into the width and height instead of expanding it:

.box {
   width: 300px;
   padding: 20px;
   border: 10px solid #478D93;
   box-sizing: border-box;

The padding and borders are laid out and drawn inside the width and height. So it dynamically subtracts the borders and padding of each side from the width and height properties we determine.


As a result, the final width of the rendered box is the actual 300px width declared, regardless of padding and borders.

box-sizing also accepts the value content-box, which is actually the default value –– sound familiar?

One Rule For All

As Paul Irish suggests, we can declare it once with the universal selector and it will work its magic throughout our project.

* {
  box-sizing: border-box;

“Wait, aren’t universal selectors bad practice?” The truth is, universal selectors are bad only when they are misused –– I’d say this is a good use case for it.


box-sizing can be applied to any element that accepts a width or height, so it makes it easier to develop with flexibility in mind and it’s one less thing to worry about when styling our pages.

Support is also great, as all major browsers (except IE7) support it. Currently, Firefox is the only browser that needs a vendor prefix, so make sure to also include the “-moz-” prefixed declaration.

4 Responses to “Take Control of the Box Model with box-sizing”

  1. I didn’t understand the box sizing till i read this entry, wow amazing post thank you

  2. リミテッドエディション,トゥッティフルッティ,トゥールビヨンソロバットバン,ウブロ ビッグバン トゥールビヨン ソロ バットバン 28800振動 (手巻き),ウブロ ビッグバン トゥールビヨン ソロ バットバン 28800振動 (手巻き), BOX, ビッグバンブラックマジック衝撃のクオーツ式腕時計の開発|エプソン水晶デバイス世界初のクオーツ式腕時計である「クオーツアストロン 35Q」。当時、高精度と小型化の開発競争を制したのが、諏訪湖のほとりに社屋を構えていた諏訪精工舎(現在のセイコーエプソン)である
    ブランドコピー時計大人気を海外激安通販専門店ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、グッチ、エルメス、パネライ、パテックフィリップ偽物(コピー商品)のブランドの腕時計の販売、通販。 http://www.gowatchs.com/brand-237.html

  3. スーパーブランドコピー激安販売!
    ブランドコピー時計大人気を海外激安通販専門店ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、グッチ、エルメス、パネライ、パテックフィリップ偽物(コピー商品)のブランドの腕時計の販売、通販。 http://www.bagkakaku.com/cariter_watch.html

  4. プラダ スーパーコピー,プラダ 財布 コピー,プラダ 新作 財布ブランド財布コピー,ブランド スーパーコピー 財布,プラダ スーパーコピー 財布,シャネル財布コピー,グッチ スーパーコピー 財布,エルメス スーパーコピー 財布,ルイヴィトン長財布コピー,スーパーコピー財布,エルメスコピー財布,各種のブランドはかばんをコピーします偽物ブランド,激安偽物,ブランド財布コピー,エルメス財布コピー,ブランドのコピーブランド財布,ルイ?ヴィトンブランド財布コピー,偽ブランドグッチ財布,D&G,コピー財布偽物,偽物時計コピー,時計,ボッテガベルト,,靴,その他のバッグコピー,ブランド財布激安,ブランド激安販売,偽ブランド激安市場,通販送料無料專門店 ルイヴィトンコピー 当店ルイヴィトン コピー 財布、ルイヴィトン コピー バッグ 全MAX80%OFF!期間限定SALE。最短即日発送。送料無料ルイヴィトン コピー,ルイヴィトン コピー 財布,ルイヴィトン コピー バッグ
    高品質2015シャネル スーパーコピー激安專門店弊社は海外大好評を博くシャネル コピー激安老舗です,2015高品質シャネル バッグ コピー,シャネル 靴 コピー,シャネル 財布 コピー品の品質はよくて、激安の大特価でご提供します。 http://www.gginza.com/watch/iwc/index.html

Leave a Reply

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more