Box Sizing

box-sizing CSS Property

The box-sizing property defines how the width and height of an element are calculated, affecting the layout and size of elements on a page.

• content-box:

  • The default value.

  • Width and height include content only.

  • Padding and border are added outside the specified dimensions.

• border-box:

  • Width and height include content, padding, and border.

  • Makes the element easier to size and layout accurately.

Using box-sizing: border-box simplifies layout by including padding and borders in the element's total size, while content-box can be useful with position: relative or absolute when you want positioning to depend only on the content size.

Possible Values

Value

Units

Description

content-box

N/A

Default value where width and height apply only to the content, excluding padding and border.

border-box

N/A

Width and height apply to the content, padding, and border, simplifying element sizing.

Example

1. We have set the container's width greater than the canvas width and applied box-sizing: content-box. With 5rem padding on both the left and right sides, the total width in this case will be: 5rem + 5rem + container's width.

1. Now, with box-sizing: border-box applied, the total width includes the padding, so it will be equal to the container's defined width.

Conditional Values

What are conditional values?

The foreground / text color can also be configured using conditional values by expanding the formula editor.

For Example

• Change the box-sizing to border-box if current device is mobile.

IF(GETCURRENTDEVICE(Phone), "border-box","content-box")