> For the complete documentation index, see [llms.txt](https://hoilzz-til.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hoilzz-til.gitbook.io/docs/frontend/markup-css/css/box_sizing.md).

# box\_sizing

box sizing은 요소의 `width` 와 `height` 를 계산하는데 사용되는 기본적인 CSS box model을 대체하기 위해 사용된다.

| characteristic | value       |
| -------------- | ----------- |
| 초기값            | content-box |
| 상속             | no          |

## syntax

### content-box

* CSS 표준에 의해 정의된 기본 스타일
* `width`와 `height` 속성은 오로지 콘텐츠만을 포함하며 측정되며, `padding`**,** `border`**,** `margin` **미포함**
* 참고 : padding, border, margin은 박스 외부에 존재. 예를 들어

  ```css
    .box
    {
      width : 350px;
      border : 10px solid black;
    }
  ```
* 결과적으로 브라우저에서 렌더링 되는 것은 `.box {width : 370px}`

### padding-box

* width와 height 속성은 padding 크기를 포함한다.
* 하지만 border 및 margin 미포함

## border-box

* width와 height 속성이 padding border를 포함. margin 미포함
* 이 box model은 IE 에서 문서가 쿽스 모드일 때 사용
* 참고: padding 과  border는 박스 안에 존재한다. 이를테면 .box {width: 350px}; 인  요소에  {border: 10px solid black;} 를 적용하면 결과적으로 {브라우저에서 렌더링되는 것은} .box {width: 350px;}이다.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://hoilzz-til.gitbook.io/docs/frontend/markup-css/css/box_sizing.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.