[Front-end] CSS - Box Model: Content-Box vs. Border-Box 차이

Box Model: Content-Box vs. Border-Box

The default value of box-sizing property is content-box.

(box-sizing 속성의 기본 값은 content-box )

The default box model: box dimensions are affected by border thickness and padding.

(이 기본 값은 경계의 두께나 여백에 의해 box dimension이 영향을 받는다.)

• content-box : 지정한 CSS width 및 height를 컨텐츠 영역에만 적용. border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있다.
• border-box : 지정한 CSS width 및 height를 전체 영역에 적용. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있다.

<div> 태그 등의 영역 크기를 100px으로 설정했을 때

• 컨텐츠 영역만 100px으로 맞추고 싶다? box-sizing : content-box;
• 모든 요소를 고려해서 박스 크기를 100px으로 딱 맞추고 싶다? box-sizing : border-box;

* {
  box-sizing: border-box;
}