[CSS] content box와 border box의 차이

box-sizing

box-sizing 속성은 요소의 크기 계산 기준을 지정한다.

 

1. content-box

• 요소의 내용(content) + padding + border로 크기 계산
• padding, border의 너비와 높이를 요소의 사이즈에 포함시키는 방법

예제

box 클래스를 가진 요소는 width가 100px (width) + 10px (padding-left) + 10px (padding-right) + 5px (border-left) + 5px (border-right)인 130px이 된다.

.box {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  /* 아래의 속성이 최종 사이즈에 포함된다 */
  padding: 10px;
  border: 5px solid tomato;
}

 

2. border-box

• 요소의 내용(content)으로 크기 계산
• padding, border의 너비와 높이를 요소의 사이즈에 포함시키지 않고 순수한 width, height만을 요소의 사이즈로 지정하는 방법

예제

box 클래스를 가진 요소 border-box를 속성을 가지기 때문에 최종 width가 padding, border값을 제외한 순수한 width인 100px이다.

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  /* 아래의 속성은 최종 사이즈에 포함되지 않는다 */
  padding: 10px;
  border: 5px solid tomato;
}