> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/layout/box-sizing.md).

# Box Sizing

## `.box-size-content`

Sets the box sizing to `content-box`, indicating that the width and height of the element should be calculated based on its content, excluding padding and border.

CSS equivalent: `box-sizing: content-box;`

Example usage:

```html
<div class="box-size-content">This element has a width and height calculated based on its content.</div>
```

***

## `.box-size-border`

Sets the box sizing to `border-box`, indicating that the width and height of the element should include its content, padding, and border.

CSS equivalent: `box-sizing: border-box;`

Example usage:

```html
<div class="box-size-border">This element has a width and height calculated including its content, padding, and border.</div>
```

***

These classes allow you to control how the dimensions of an element are calculated and affect the sizing behavior of its content, padding, and border. Use them to achieve desired layout and spacing effects within your design.