box-sizing

box-sizing

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

box-sizing : content-box;

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

box-sizing : border-box;

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

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

* {
    box-sizing : border-box;
}