[CSS] box-sizing, 테두리까지 포함 시키는 방법!

출처: 테일윈드 CSS

여러 요소를 배치하려면 각 요소들의 너비 값을 기준으로 해야합니다. width, height 속성 값이 컨텐츠 영역의 너비와 높이만 나타내게 되는데, 여기에서 padding이나 border를 설정했다면 설정된 값만큼 빼서 width와 height를 계산해야합니다. 이렇게 매번 계산하게 되면, 너무 비효율적입니다. 이러한 방법을 CSS 속성인 box-sizing을 이용하면 padding과 border값을 포함시켜서 사용할 수 있게 설정이 가능합니다.

.box1{width:300px;height:300px;padding:20px;border:5px solid #ccc;}
.box2{width:300px;height:300px;padding:20px;border:5px solid #ccc; box-sizing:border-box;}

위의 코드는 width와 height 값이 각각 300px입니다. 하지만 padding과 border 값이 포함이 되느냐 안되느냐의 차이가 있는 box 형태입니다. box-sizing: border-box의 속성을 통해서 padding,border의 값을 모두 포함하여 300px X 300px의 박스 모델이 나오게 됩니다. (margin은 포함되는 속성이 아닙니다, 간격입니다.)

 

그리고 box-sizing 속성은 content-box가 기본값입니다. (padding과 border는 미포함 상태)

 

* {box-sizing:border-box;}

위의 코드로 지정을 해놓으면 일일이 padding과 border를 빼면서 box 크기를 계산할 필요가 없어서 저도 자주 사용하는 편입니다.