css box-sizing 속성 정리

1. box-sizing이란

박스의 크기를 어떤 기준으로 정할 것인가를 말한다.
기본값은 content-box이다.

2. box-sizing:content-box 와 box-sizing:border-box의 차이

(1) box-sizing:content-box
내용(content-box)으로만 크기를 지정한다.

(2) box-sizing:border-box
내용(content-box) + padding + border로 크기를 지정한다.

padding과 border은 요소의 크기가 커지는 속성이 있기 때문에, 추가하게 되면 기본값인 box-sizing:content-box 에서는 다른 요소보다 커지게 된다.

.container .item:first-child{
padding : 15px;
border : 10px solid tomato;
box-sizing : border-box;
}

box-sizing : border-box를 추가하면 따로 크기를 수정할 필요 없이 다른 요소들과 같은 크기를 유지할 수 있다.