CSS Box Model과 box-sizing

문서의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 CSS Box Model에 따라 각각의 HTML element를 box 형태로 표현하며, CSS를 통해 각 element의 box 크기, 위치, 속성을 설정할 수 있다.

 

CSS Box Model

CSS Box Model은 크게 네 가지 영역으로 구분되고, 안쪽부터

1. Content
2. Padding
3. Border
4. Margin

영역이 있다.

 

Source: MDN Web Docs / CSS Basic Box Model

Content 영역은 content edge가 감싼 영역으로 텍스트, 이미지 등 실제 content가 위치하는 영역이디.

Padding 영역은 padding edge가 감싼 영역으로 border 영역과 content 영역 사이에 위치한 안쪽 여백이다.

Border 영역은 border edge가 감싼 영역으로 box의 테두리다.

Margin 영역은 margin edge가 감싼 영역으로 box의 테두리와 다른 인근 element 사이에 위치한 바깥쪽 여백이다.

 

box-sizing

각 element는 CSS box-sizing 속성의 값에 따라 다른 box 크기를 가질 수 있으며, CSS로 box의 크기를 설정할 때 이에 주의해야 한다.

 

box-sizing 속성의 값은

1. content-box
2. border-box
3. inherit
4. initial

네 가지가 있으며, 기본 설정값은 content-box이다.

본 글에서는 content-box와 border-box의 차이에 대해 알아본다.

 

content-box

box-sizing 속성에 content-box 값이 적용될 때, box의 width와 height 값은 오직 content 영역의 width와 height 값으로만 적용되고, 테두리와 안팎 여백의 크기에는 영향을 주지 않는다.

 

content 영역의 크기 = width * heigth
box 전체 크기 = (width * height) + (안쪽 여백 + 테두리)

 

가령 width, height가 100px로 설정되어 있고, padding이 10px, border가 10px로 설정되어 있으면,

content 영역의 크기는 100 * 100,

box 전체 크기는

총 width = 100 + ((2 * 10) + (2 * 10)) = 140px

총 height = 100 + ((2 * 10) + (2 * 10)) = 140px

이고,  140 * 140 이 될 것이다.

box-sizing: content-box

 

div {
  width: 100px;
  height: 100px;
  padding:10px;
  border: 10px solid blue;
  color: white;
  background-color: red;
  text-align: center;
}

 

 

border-box

반면 box-sizing 속성에 border-box 값이 설정되었을 때는 전체 box의 width * height 에 content 영역, 안쪽 여백, 테두리의 크기가 모두 포함되며, 설정된 width와 height 값이 곧 전체 box의 width와 height가 된다.

 

content 영역의 크기 = (width * heigth) - (안쪽여백 + 테두리)
box 전체 크기 = width * height

 

가령 width, height가 100px로 설정되고, padding이 10px, border가 10px로 설정되었을 때

content 영역의 크기는

width = 100 - ((2 * 10) + (2 * 10)) 

height = 100 - ((2 * 10) + (2 * 10))

60 * 60이 되고,

box 전체 크기는 100 * 100 이 된다.

box-sizing: border-box

 

div {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding:10px;
  color: white;
  background-color: red;
  text-align: center;
}

 

 

결론

content-box 속성값은 content 영역의 크기를 원하는 크기로 설정할 때 유용하고,

border-box 속성값은 전체 box크기를 원하는 크기로 설정할 때 유용하다.

 

 

참고자료

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

box-sizing - CSS: Cascading Style Sheets | MDN