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

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:

• CSS calculates the width of elements by adding the width, padding, and border together.
• CSS calculates the height of elements by adding the height, padding, and border together.

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

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.

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue; 
}

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

With the box-sizing

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:

.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:

* {
    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

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:

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

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

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:

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.