CSS - box-sizing element의 크기에 padding, border 포함할 것인지 선택하는 속성

box-sizing

요소의 가로와 높이 길이에 패딩과 보더의 길이를 포함시킬 것인지 안 시킬 것인지 구분하는 속성입니다.

• content-box
  • border와 패딩은 포함시키지 않고 내용만 포함
• border-box
  • width와 height의 길이를 내용, padding, border 포함시킨다.

<div class ="a">
  content-box</br>
  border의 길이가 포함되지 않았다.
</div>
</br>
<div class="b">
  border-box</br>
  가로 세로의 길이에 border 길이가 포함
</div>

.a{
  border: 15px solid;
  width:300px;
  height:200px;
  box-sizing:content-box;
}

.b{
  border: 15px solid;
  width:300px;
  height:200px;
  box-sizing:border-box;
}