HTML/CSS: box-sizing 속성

box-sizing 속성

엘리먼트의 너비와 높이를 지정하는 기존의 CSS box model을 수정하기 위한 CSS 속성이다.

`box-sizing`의 값으론, `content-box`, `padding-box`, `border-box`가 있으며,

`content-box`가 기본값이다.

box-sizing: content-box

     CSS 표준에 정의되어 있는 기본값이다.

     width 와 height 속성은 컨텐츠만 포함하며, padding, border, margin 은 포함하지 않는다.

box-sizing: padding-box

     width 와 height 속성이 padding 을 포함한다. border, margin 은 포함하지 않는다.

box-sizing: border-box

     width 와 height 속성이 padding, border 를 포함한다. margin 은 포함하지 않는다.

     이 값은 IE Quirks mode 의 구현과 동일하다.

 속성 값 Value 설명 Description

 content-box

- 기본 값. 가로와 세로 너비가 콘텐츠 영역만의 가로 세로 너비를 지칭하도록

  설정한다. 패딩, 보더, 마진 영역은 지정된 크기에 포함되지 않는다.

 border-box

- 가로와 세로 너비가 마진 영역을 제외하고

  콘텐츠 영역, 패딩 영역, 보더 영역을 포함한 크기로 설정한다.

 initial

- 속성의 기본 값으로 설정한다.

 inherit

- 부모 요소의 속성 값을 상속받도록 설정한다.

 글을 보면서 이해 하기 보단 Chrome 환경에서 F12 를 누르면 개발자 모드 접근이 가능합니다. 

  Elements 속성 에서 형관팬 칠한 부분을 직접 수정하거나, 별표친부분을 확인하며 직접 수정 하며 코딩 하시면 이해하기

가 쉽습니다. 궁금하신거 있으시면 친절히 답변 달아드립니다~