[CSS] Box Model(박스 모델)

Box Model(박스 모델)이란?

Box Model(출처: MDN)

문서의 레이아웃을 계산할 때, 하나의 박스는 위 사진과 같이 네 부분으로 이루어진다.

• 컨텐츠 영역(Content Area)
• 패딩 영역(Padding Area)
• 테두리 영역(Border Area)
• 마진 영역(Margin Area)

 

CSS에서 box-sizing 속성이 기본값인 content-box일 때, width, height 같은 속성으로 크기를 지정하면 padding, border, margin을 제외한 컨텐츠 영역의 크기만을 지정하는 것이다.

 

box-sizing 속성이 border-box일 때, width, height 같은 속성으로 크기를 지정하면 padding, border를 포함하고, margin은 제외하는 테두리 영역의 크기를 지정하는 것이다. 사이즈 계산의 편의성 때문에 일반적으로 border-box를 많이 사용한다.

참조

• CSS 기본 박스 모델 입문
• box-sizing