요약
문서에서, 각 요소(element)는 사각형 박스로 나타냅니다. 이 박스의 크기, 특성(색, 배경, 테두리 모양 등) 및 위치 결정이 렌더링 엔진의 목적입니다.
CSS에서, 이 사각형 박스 각각은 표준 박스 모델을 사용하여 기술됩니다. 이 모델은 요소에 의해 차지되는 공간의 내용(content)을 설명합니다. 각 박스는 네 경계(edge)가 있습니다: margin 경계, border 경계, padding 경계 및 content 경계.
.png)
content 영역는 요소의 실제 내용을 포함하는 영역입니다. 거기에는 대개 배경, 색 또는 이미지(그 순서로, 배경색을 감추는 불투명한 이미지)가 있고 content 경계 안쪽에 놓입니다. 따라서 그 크기(dimensions)는 content 너비(또는 content 박스 너비) 및 content 높이(또는 content 박스 높이)입니다.
CSS box-sizing 속성이 기본(default)으로 설정된 경우, CSS 속성 width, min-width, max-width, height, min-height 및 max-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 | 초기 정의 |
참조
- CSS 참고서
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.
- 관련 CSS 속성:
box-sizing,background-clip,height,max-height,min-height,width,max-height,min-height,padding,padding-top,padding-right,padding-bottom,padding-left,border,border-top,border-right,border-bottom,border-left,border-width,border-top-width,border-right-width,border-bottom-width,border-left-width,margin,margin-top,margin-right,margin-bottom,margin-left