CSS) box-sizing

1) box-sizing
요소의 크기 계산 기준을 지정

속성 값

값	의미	기본값
content-box	너비(width, height)만으로 요소의 크기를 계산	content-box
border-box	너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산

 

사용법

html

<div class="box"></div>

css

.box {
  width: 200px;
  height: 200px;
  background: orange;
  padding: 40px;
  border: 10px solid red;
}

 

※ 개발자도구를 통해 영역을 확인해보면 200x200인 default(content-box)를 고정하고 padding을 더하기 때문에 당연히 크기가 커진다.
border-box속성을 추가하면 외부 border-box의 사이즈를 고정하기 때문에 padding을 더하더라도 내부에 padding이 나타난다.

box-sizing: border-box;