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.

This is a Conditional Value field. Such fields allow you to specify values directly OR use a Formula to specify a value. Conditional values are useful for specifying different values for changing situations, such as varying device types or screen sizes.

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")