웹 문서에서 여러 요소를 배치하려면 각 요소의 너비를 계산해야 합니다. CSS의 width 속성은 콘텐츠 영역(content area)의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 합니다.
이럴 때 box-sizing 속성을 사용하면 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 박스의 크기을 지정할 수 있습니다.
box-sizing
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성입니다.
기본형
box-sizing : content-box | border-box
- content-box : 콘텐트 영역을 기준으로 박스의 크기를 정합니다.
- border-box : 테두리를 기준으로 박스의 크기를 정합니다.
예제
<div class="cb">
<p>content-box 컨텐츠기준</p>
</div>
<div class="bb">
<p>border-box 테두리기준</p>
</div>
div {
display: block;
margin: 20px auto;
padding: 20px;
border: 20px solid #dddddd;
width: 250px;
}
.cb {
box-sizing: content-box;
}
.bb {
box-sizing: border-box;
}