CSS3 Box Sizing Tutorial

CSS3 Box Sizing

The CSS box-sizing property uses padding and border to calculate an element's total width and height.

CSS3 Box Sizing

The CSS box-sizing property allows us to select either border-box or content-box property while using width and height. Please keep in mind that the content-box is the default value of box-sizing.

Box Sizing Values:

  • border-box
  • content-box

Box Sizing: Content Box

This is the default value of box-sizing that uses border and padding during the calculation of the total width and height of the element.

Total width of the HTML element = content width +padding + border

Total height of the HTML element = content width +padding + border

General Syntax

Try it now

Source Code

Try it now

Box Sizing: border-box;

The border-box property of box-sizing does not increase the total width and height of the HTML element means total width will be same as the width set for the element but it shrink the content area space since shrinkage space is distributed among padding and border.

width of content Area = width - (padding + margin + border-width)

width - (padding + margin + border-width) + padding + margin + border-width = Total width

height - (padding + margin + border-width) + padding + margin + border-width = Total height

General Syntax

Try it now

Source Code

Try it now

How To Use Box Sizing In Web Page Layout Design

Creating multi-column layout using the box-sizing property. In this case, you do not have to worry about the final size of the element's box while adding the padding and border on the element.

Here, creating the three-column layout and each column has equal width and lies side by side using the float property.

Source Code

Try it now