CSS box-sizing Property

CSS box-sizing property specifies whether the padding and border of an element should be included in its total width and height or not.

By default, the box-sizing property is set to content-box. It specifies that the padding and border will not be included in the element’s width and height. Here, the width and height property sets only the element’s content area’s width and height.

For example, if an element has 200px width and 200px height and you add a padding of 30px on each side, the element’s total width and height will become 230px instead of 200px, and the element will become wider than its original size. This is the problem with box-sizing: content-box;.

The above problem is solved using box-sizing: border-box;. In this case, the padding and border are included in the element’s total width and height and the element never becomes wider than its original size(size set by the width and height property). Try out the example below to see how it works:

Example:

.div1{
  box-sizing: content-box;
}
.div2{
  box-sizing: border-box;
}

CSS Syntax

The box-sizing property has the below syntax:

box-sizing: content-box|border-box|initial|inherit;

Property Values

The box-sizing property accepts the following values:

content-boxThis is the default value. The padding and border are not included in element’s width and height. The width and height property set only the element’s content width and height. The element may become wider than the specified width and height.
border-boxThe padding and border are included in the element’s width and height. The width and height property set the element’s total width and height and the element never become wider than the specified width and height.
initialSets the box-sizing property to its default value(content-box).
inheritInherits the box-sizing property from the parent element.

General Info

Default Valuecontent-box
InheritedNo
JavaScript Usageelement.style.boxSizing = “border-box”;

Related Pages

CSS Tutorial: CSS Box-Sizing