The box-sizing property controls how the total width and height of an element are calculated. There are two main values for box-sizing:

• content-box: This is the default value. The width and height are applied only to the content area. Padding, borders, and margins are added on top of the defined width and height.
• border-box: The width and height include the content, padding, and border. The overall size of the element is maintained as specified, making layout calculations easier.

Using box-sizing properly helps you control your layout and avoid unexpected element sizes.

Syntax

Follow the code block below to set box-sizing in CSS:

/* Default box model, content-box (padding and border are extra) */
box-sizing: content-box;

/* Alternative box model, border-box (padding and border are included) */
box-sizing: border-box;

Explanation:

• content-box:
  • The specified width/height applies only to the content area.
  • Padding and border are added to the dimensions, making the element larger.
• border-box:
  • The specified width/height covers the content, padding, and border.
  • This approach keeps the overall size of the element as declared.

Example 1: Using box-sizing: content-box

In this example, we set a <div> with box-sizing: content-box. We define the element's width as 200px, add a padding of 20px, and a border of 5px. Let's calculate the total width mathematically:

• Content Width: 200px
• Total Padding: 20px (left) + 20px (right) = 40px
• Total Border Width: 5px (left) + 5px (right) = 10px
• Total Width: 200px + 40px + 10px = 250px

Explanation:

• Content Width: The element's content is 200px wide.
• Padding: The left and right padding add 40px (20px each side).
• Border: The borders add another 10px in total.
• Outcome: The overall width of the box becomes 250px, even though the width property is set to 200px.

Example 2: Using box-sizing: border-box

In this example, we use box-sizing: border-box with the same dimensions. The width is still declared as 200px, but now padding and border are included in that value.

To calculate the available content width:

• Total Width: 200px (remains unchanged)
• Space Taken by Padding and Border: 20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border) = 50px
• Content Width: 200px - 50px = 150px

Explanation:

• Total Width: The element's overall width is fixed at 200px.
• Padding and Border: These are subtracted from the total, leaving room only for the content.
• Outcome: The content width adjusts to keep the overall element width at 200px, resulting in a content area of 150px.

This lesson shows how the box-sizing property affects the calculation of an element's size. Using content-box adds padding and borders outside the defined width, while border-box incorporates them, making layout calculations more predictable and easier to manage.