It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Use the CSS Box-Sizing: How Border-Box Controls the Size of Elements

Reading time 3 min
Published Dec 4, 2016
Updated Oct 2, 2019

TL;DR – The CSS box-sizing sets the way the total width and height of HTML elements should be calculated.

CSS Box-Sizing: Main Tips

  • CSS box-sizing property makes sure that padding and borders do not increase the width and height of elements.
  • Set box-sizing to CSS border-box to guarantee that the element size includes borders and padding.
  • You can let users control the size of certain elements by using the resize property.

Without the box-sizing

The box model follows these principles:

As a result, developers need to adjust values when setting width and height to leave space for borders and padding.
 

Smaller div (width is 300px and height is 100px).

 

Bigger div (width is also 300px and height is 100px).

 

In this example, there are two <div> elements:

  • The first one has height, width, and a CSS border.
  • The second one has the same parameters assigned but it also has the CSS padding.
  • As a result, the second element will appear bigger than the first one.
Example
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue; 
}

.div2 {
    width: 300px;
    height: 100px;
   padding: 50px;
   border: 1px solid red;
}

With the box-sizing

Both divs are the same size!
Wohoo!

Since the box model created many issues for developers, the CSS3 introduced the box-sizing.

CSS box-sizing makes sure that the total width and height of elements include padding and borders. As a result, elements do not appear bigger than they should be.

border-box

CSS border-box is the most popular choice for setting box-sizing. It guarantees that the content box shrinks to make space for the padding and borders.

Therefore, if you set your element width to 200 pixels, border-box makes sure that the content, padding, and borders fit in this number.

In this example, box-sizing: border-box; is added to both <div> elements:

Example
.div1 {
    width: 400px;
    height: 200px;
    border: 2px solid red;
    box-sizing: border-box;
}

.div2 {
    width: 400px;
   height: 200px;
   padding: 30px;
   border: 2px solid green;
   box-sizing: border-box;
}

Tip: border-box is the best choice for designing layouts and managing the sizes of HTML elements.

You do not need to set this property for each element individually. Instead, use the asterisk (*) selector to select all elements.

In this example, we apply the box-sizing: border-box; to all elements in an HTML document:

Example
* {
    box-sizing: border-box;
}

content-box

content-box sets the regular behavior of adding padding and borders to elements separately.

If you set the width of the element to 200 pixels, the item will appear bigger once you add padding and borders.

Elements Resizable by Users

This is a resizable container. Try dragging the bottom right corner!

The resize property is for indicating whether an element is resizable by users. It can have four values: horizontal, vertical, both, and none.

The below example shows how you can let users resize the width of a container:

Example
div {       
    resize: horizontal;  /* This allows to resize the div's width */     
    overflow: auto;  
}

The container in the following example will have a resizable height:

Example
div {
    resize: vertical; /* This allows to resize the div's height */
    overflow: auto;  
}

This example allows users to resize both the width and the height of a container:

Example
div {       
    resize: both;    /* This allows to resize both of the div's size properties */   
    overflow: auto;  
}

CSS Box-Sizing: Useful Tips

  • padding-box used to apply the width and height of elements to their padding and content. Browsers no longer support this property.
  • Most of the modern browsers support the box-sizing property.