CSS box-sizing Property

The box-sizing property in CSS determines how an element's width and height are calculated, including whether padding and borders are counted within the specified dimensions.

• content-box (default): Width and height apply only to the content area; padding and borders are added outside.
• border-box: Width and height include the content, padding, and border within the specified dimensions.
• Makes element sizing more predictable and simplifies layout design, especially when using border-box.

Syntax

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

content-box

The content-box value for box-sizing calculates an element's width and height, excluding padding and borders, which are added to the specified dimensions.

Syntax:

box-sizing: content-box;

Example: Illustrates the use of the box-sizing property whose value is set to content-box.

border-box

The border-box value for box-sizing calculates an element's width and height, including padding and borders within the specified dimensions, making layout design more straightforward and predictable.

Syntax:

box-sizing: border-box;

Example: Illustrates the use of the box-sizing property whose value is set to border-box.