box-sizing 속성

box-sizing 속성

1. box-sizing 속성

 - 박스 모델에서 요소의 크기를 계산하는 방법을 제어하는 데 사용되는 속성입니다.

 

2. box-sizing의 주요 값

 - content-box (기본값)

    - 요소의 크기를 요소의 콘텐츠 영역에 따라 계산합니다.

    - 요소의 width와 height는 콘텐츠의 크기만을 고려하며, padding 및 border은 요소 크기에 추가됩니다.

 - border-box

    - 요소의 크기를 요소의 테두리(border)를 포함한 영역에 따라 계산합니다.

    - 요소의 width와 height는 콘텐츠와 padding, 그리고 border까지 고려한 크기가 됩니다.

 - initial

    - 기본값으로 설정합니다.

 - inherit

    - 부모 요소의 속성값을 상속받습니다.

 

3. 예시

See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.