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-box | This is the default value. The padding and border are not included in the 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-box | The 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. |
| initial | Sets the box-sizing property to its default value(content-box). |
| inherit | Inherits the box-sizing property from the parent element. |
General Info
| Default Value | content-box |
| Inherited | No |
| JavaScript Usage | element.style.boxSizing = “border-box”; |
Related Pages
CSS Tutorial: CSS Box-Sizing
