> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/css/attributes/size/box-sizing.md).

# box-sizing

## box-sizing

![](https://4208234536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_TNZwLuHV9ipYLbvRq%2Fuploads%2FcrzrbAe8E97FMokbBFJP%2Fimage.png?alt=media\&token=3e23a1db-91bf-4288-8724-13a77044cace)

`box-sizing` 옵션을 설정하면 폭 계산 방식을 정할 수 있다. 기본적으로 다음과 같이 설정되어 있다.

```css
box-sizing : content-box;
```

위 설정은 폭을 내용물 기준으로 정하라는 의미이며, 만약 폭이 400px 경우 실제 크기는 `padding`, `border`, `margin`이 포함되어 더 커지게 된다. 내부 여백의 경우 폭에 포함되는 경우가 많기 때문에 다음과 같이 테두리를 기준으로 폭을 계산하도록 설정할 수 있다.

```css
box-sizing : border-box;
```

위와 같이 설정할 경우 폭 400px인 경우 실제 내용물의 크기는 `border`, `padding`을 제외한 크기가 된다.\
주의할 점은 이 때에도 `margin`은 폭 계산에 포함되지 않기 때문에 좌우 `margin`을 줄 때에는 신중해야 한다는 점이다.

모든 항목에 border-box 설정을 하고 싶은 경우 다음과 같이 작성한다.

```css
* {
    box-sizing : border-box;
}
```