CSS 박스 모델 입문

요약

문서에서, 각 요소(element)는 사각형 박스로 나타냅니다. 이 박스의 크기, 특성(색, 배경, 테두리 모양 등) 및 위치 결정이 렌더링 엔진의 목적입니다.

CSS에서, 이 사각형 박스 각각은 표준 박스 모델을 사용하여 기술됩니다. 이 모델은 요소에 의해 차지되는 공간의 내용(content)을 설명합니다. 각 박스는 네 경계(edge)가 있습니다: margin 경계, border 경계, padding 경계content 경계.

CSS Box model

content 영역은 요소의 실제 내용을 포함하는 영역입니다. 거기에는 대개 배경, 색 또는 이미지(그 순서로, 배경색을 감추는 불투명한 이미지)가 있고 content 경계 안쪽에 놓입니다. 따라서 그 크기(dimensions)는 content 너비(또는 content 박스 너비) 및 content 높이(또는 content 박스 높이)입니다.

CSS box-sizing 속성이 기본(default)으로 설정된 경우, CSS 속성 width, min-width, max-width, height, min-heightmax-height가 content 크기를 제어합니다.

padding 영역은 패딩을 둘러싼 보더까지 미칩니다. content 영역이 배경, 색 또는 그 위에 설정된 이미지가 있을 때, 이는 패딩까지 이어집니다. 이것이 패딩을 content의 연장으로 생각할 수 있는 이유입니다. 패딩은 padding 경계 안쪽에 놓이고 그 크기는 padding 박스 너비padding 박스 높이입니다.

패딩과 content 경계 사이의 공간은 padding-top, padding-right, padding-bottom, padding-left 및 단축(shorthand) CSS 속성 padding으로 제어될 수 있습니다.

border 영역은 padding 영역을 보더를 포함하는 영역까지 확장합니다. 이는 border 경계 안쪽 영역이고 그 크기는 border-box 너비border-box 높이입니다. 이 영역은 border-width 속성 또는 단축 border에 의해 정의된 보더의 크기에 의존합니다.

margin 영역은 border 영역을 요소를 그 이웃과 구별하기 위해 쓰이는 빈 영역으로 확장합니다. 이는 margin 경계 안쪽 영역이고 그 크기는 margin 박스 너비 margin 박스 높이입니다.

margin 영역의 크기는 margin-top, margin-right, margin-bottom, margin-left 및 단축 CSS 속성 margin으로 제어됩니다.

margin collapsing이 일어날 때, margin 영역은 마진이 박스 간에 공유되기 때문에 분명히 정의되지 않습니다.

끝으로, 비대체(non-replaced) 인라인 요소의 경우 차지하는 공간의 양(줄높이(행간)에 기여)은 비록 보더 및 패딩이 content 주위에 눈에 보이더라도 line-height 속성에 의해 결정됨을 주의하세요.

스펙

스펙 상태 설명
CSS Level 2 (Revision 1) Recommendation 더 정확하게 표현되었지만, 실질 변화는 없음
CSS Level 1 Recommendation 초기 정의

참조

문서 태그 및 공헌자

 이 페이지의 공헌자: KwangseokWon, Netaras
 최종 변경: KwangseokWon,