CSS box-sizing? content-box vs border-box 차이점 정리

by

CSS box-sizing 속성

box-sizing 속성은 CSS의 테두리 영역의 크기를 결정합니다. box-sizing 속성값에는 content-box와 border-box가 있습니다.

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

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

  • 100px 이상으로 <div>가 더 튀어나와서 크기를 100px으로 딱 맞추고 싶다? box-sizing : border-box;
  • 100px 미만으로 <div>가 더 적게 나와서 컨텐츠 영역만 100px으로 맞추고 싶다? box-sizing : content-box;

 

CSS Box Model

CSS의 각 태그의 영역은 Box Model로 구성됩니다.

  • content : 글씨가 삽입되는 영역
  • border : 테두리 영역
  • padding : content와 border 사이
  • margin : border와 다른 태그 영역 사이

CSS box model

 

content-box 속성값

content-box 속성값은 지정한 width 및 height 크기는 오직 content 영역의 크기에만 영향을 끼칩니다. 크기를 덧셈으로 표현하는 것은 엄밀히 말하면 맞지 않지만 직관적으로 이해하기에는 좋습니다.

  • 전체 크기 = content-box + border + padding + margin
  • 컨텐츠 크기 = content-box

따라서 border, margin, padding은 설정을 하면 따로 합산됩니다. 그러므로 지정한 width, height보다 태그 영역이 더 커질 수 있습니다.

 

<html>
  <head>
    <style>
      div {
        border : 5px black solid;
        width : 100px;
        height : 100px;        
        box-sizing:content-box;
      }
    </style>
  <body>
    <div>content-box</div>
  </body>
  </head>
</html>

 

padding : 0, margin : 0, border : 5px, width : 100px, height : 100px 일 때,

CSS content-box 의미

  • 전체 width = 5px + 100px + 5px = 110px
  • 전체 height = 5px + 100px + 5px = 110px
  • content width =  100px
  • content height = 100px

모든 CSS는 기본 설정값은 content-box입니다. 따라서 초기 설정에서 width, height를 설정하면, 컨텐츠 영역 이외에 border, padding, margin은 따로 계산되므로 초기 설정값보다 영역이 더 커지게 되어 레이아웃이 엉망이 되는 경우가 많습니다.

따라서 본인이 지정한 width, height 값으로 영역 전체 크기가 똑같이 유지되기를 원한다면, box-sizing : border-box를 삽입해주면 됩니다. 거의 대부분은 그런 오류 방지를 위해서 border-box 속성을 필수로 사용합니다.

 

border-box 속성값

border-box 속성값은 지정한 width 및 height 크기가 모든 box-model의 합계로 지정됩니다.

  • 전체 크기 = border-box = content + border + padding + margin
  • 컨텐츠 크기 = border-box – border – padding – margin

레이아웃 설정시 테두리, 패딩 등의 크기를 신경쓰지 않을 수 있습니다. 대신 컨텐츠 영역이 자동으로 초기 설정값보다 padding, border, margin 크기 만큼 줄어서 적게 설정이 됩니다.

 

<html>
  <head>
    <style>
      div {
        border : 5px black solid;
        width : 100px;
        height : 100px;
        box-sizing:border-box;
      }
    </style>
  <body>
    <div>border-box</div>
  </body>
  </head>
</html>

 

padding : 0, margin : 0, border : 5px, width : 100px, height : 100px 일 때,

css border-box 사용법

  • 실제 width = 5px + 90px + 5px = 100px
  • 실제 height = 5px + 90px + 5px = 100px
  • content width = 100px – 5px – 5px = 90px
  • content height = 100px – 5px – 5px = 90px