박스 크기 측정 기준

CSS 속성 중 box-sizing은 한 element의 width나 height의 크기를 어떻게 계산할지를 결정한다. box-sizing의 값으로는 content-box와 border-box가 들어갈 수 있고 차이점은 예제를 보면 이해하기 쉽다.

#content{
    box-sizing: content-box;
    width: 300px;
    height: 200px;
    margin: 20px;
    padding: 10px;
    border: 2px solid black;
}

#border{
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    margin: 20px;
    padding: 10px;
    border: 2px solid black;
}

두 개의 <div>에 동일한 width, margin, padding 그리고 border를 적용하고 box-sizing만 다르게 했을 때의 결과는 다음과 같다.

(좌) box-sizing: content-box (우) box-sizing: border-box

content-box를 적용한 것을 보면 width를 300px로 적용했을 때 content영역의 width가 300px로 나오는 것을 볼 수 있다. 즉 해당 <div> 박스의 총 width는 margin을 제외하고 300px + border + padding으로 324px이 된다. box-sizing을 content-box로 하면 박스 크기의 기준이 content 영역이 되는 것을 볼 수 있다.

 

border-box를 적용한 것을 보면 content 영역의 width가 276px로 줄어든 것을 볼 수 있다. 그리고 margin을 제외한 border부터의 width가 총 300px이다. box-sizing을 border-box로 하면 박스 크기가 border와 padding을 포함하는 것을 볼 수 있다.

 

content-box로 웹페이지 디자인을 진행하면 박스의 width를 border와 padding에 맞게 계속해서 계산을 하고 적용해야 하는 불편함이 있기 때문에 문서 전체에 border-box를 적용하는 게 디자인을 할 때 편하다.

* {
  box-sizing: border-box;
}