box-sizing 정리

.div1 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}

.div2 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  padding: 40px;
}


박스모델의 차이를 보자
.div1과 .div2는 가로 세로 길이를
똑같이 설정했는데 결과물이 다르다.

그 이유는 가로 세로값이 요소안에

내용물 크기를 의미하는데

테두리와 패딩의 크기까지 합쳐서

결과물이 다르게 나오는것이다.

 

따라서 실제 가로 세로크기를

300px 200px로 나타낼려면
테두리와 패딩을 계산해서 맞춰줘야하지만
box-sizing을 쓰면 자동으로 맞출수있다.


box-sizing: border-box; 으로 설정해주면
가로,세로,테두리,패딩,내용물을 모두 포함한 길이가 된다.

*{ box-sizing: border-box; } 을

모든요소에 사용하면

박스모델 디자인이 간편하다.