1. 소개
이 하위 섹션은 규범적이지 않습니다.
CSS는 소스 문서의 각 요소와 각 문자열이 element tree를 box 집합으로 변환하여 배치되는 방식을 설명합니다. 박스의 크기, 위치, 캔버스에서의 쌓임 수준은 CSS 속성 값에 따라 달라집니다.
참고: CSS Cascading and Inheritance는 박스 트리의 요소에 속성이 어떻게 할당되는지를 설명합니다. CSS Display 3 § 1 소개는 element tree가 box tree로 어떻게 변환되는지를 설명합니다.
각 CSS box 는 직사각형 콘텐츠 영역, 콘텐츠 주위의 패딩 영역, 패딩 주위의 테두리, 테두리 바깥의 마진을 가집니다. 크기 속성 [css-sizing-3]과 다양한 레이아웃 제어 속성이 콘텐츠 영역의 크기를 정의합니다. 박스 스타일 속성—padding과 그 롱핸드, border와 그 롱핸드, 그리고 margin과 그 롱핸드는 이러한 다른 영역의 크기를 정의합니다.
마진과 패딩은 이 모듈에서 정의됩니다. 테두리 역시 [css-backgrounds-3]에서 유사하게 정의됩니다.
참고: 이 모듈은 물리적 각 방향의 롱핸드 속성만 정의합니다. 추가적인 흐름 기준 롱핸드 속성은 [css-logical-1]에서 정의됩니다. 두 종류의 롱핸드 속성 모두 동일한 마진/패딩을 제어하며, 각 방향을 인덱싱하는 방법만 다릅니다.
CSS 박스 모듈의 역사와 블록 레이아웃 정의
이 모듈은 초기에는 박스 생성(CSS Display 3에서 현재 정의됨), 박스 모델(여기에서 정의됨), 그리고 블록 레이아웃([CSS2] 9, 10장에만 정의됨) 관련 CSS 3단계 명세의 설명을 포함하고 있었습니다. CSS2.1 개발 중 관리가 중단되었기 때문에, CSS2 개정판이 완성될 때 명세 내용이 심각하게 오래된 상태였습니다. 따라서 블록 레이아웃 부분은 폐기되어, 추후 새로운 블록 레이아웃 모듈에 입력 자료로 업데이트될 예정입니다. 이 모듈 및 CSS Display Module에서 분리되는 이유는 작업량이 방대하다는 실용적 이유와 CSS가 이제 여러 레이아웃 모델 (Flex 레이아웃, Grid 레이아웃, Positioned 레이아웃, Table 레이아웃, 그리고 블록 레이아웃)로 분화되었음을 인정하기 때문입니다. 각각은 별도의 병렬 모듈을 가질 가치가 있습니다.
1.1. 값 정의
이 명세는 CSS 속성 정의 규약을 [CSS2]에서 따르며, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입의 정의가 확장될 수 있습니다.
속성 정의에 나열된 속성별 값 외에도, 이 명세에서 정의되는 모든 속성은 CSS-wide 키워드도 속성 값으로 허용합니다. 가독성을 위해 명시적으로 반복하지 않았습니다.
1.2. 모듈 상호작용
이 모듈은 [CSS2] 8.1, 8.2, 8.3(단, 8.3.1 제외), 8.4절에 정의된 margin 및 padding 속성 정의를 대체합니다.
이 모듈의 모든 속성은 ::first-line과 ::first-letter 의사 요소에 적용됩니다.
2. CSS 박스 모델
각 박스는 콘텐츠 영역 (텍스트, 자손 박스, 이미지 또는 대체 요소 콘텐츠 등)을 포함하며, 선택적으로 패딩, 테두리, 마진 영역으로 둘러싸입니다. 각 영역의 크기는 해당 속성으로 지정되며, 0일 수 있고(마진의 경우 음수도 가능) 아래 다이어그램은 이러한 영역의 관계와 박스의 각 부분을 참조하는 용어를 보여줍니다:
일반적인 박스의 다양한 영역과 경계.
박스의 콘텐츠, 패딩, 테두리 영역의 배경은 background 속성으로 지정됩니다. 테두리 영역은 border 속성으로 테두리 스타일을 추가로 칠할 수 있습니다. 마진은 항상 투명합니다. 더 자세한 내용은 [css-backgrounds-3]을 참조하세요.
마진, 테두리, 패딩은 위(top), 오른쪽(right), 아래(bottom), 왼쪽(left) 부분으로 나눌 수 있으며, 각각은 해당 속성으로 독립적으로 제어할 수 있습니다.
2.1. 박스와 경계
네 영역(콘텐츠, 패딩, 테두리, 마진)의 둘레는 경계(edge)라고 하며, 각 경계는 위, 오른쪽, 아래, 왼쪽으로 나눌 수 있습니다. 따라서 각 박스는 네 개의 경계를 가지며, 각 경계는 네 면으로 구성됩니다:
- 콘텐츠 경계 또는 내부 경계
- 콘텐츠 경계는 박스의 너비와 높이에 의해 정의되는 사각형을 둘러싸며, 이는 종종 요소의 콘텐츠나 포함 블록의 크기에 따라 달라집니다. 콘텐츠 경계의 네 면이 박스의 콘텐츠 박스를 정의합니다.
- 패딩 경계
- 패딩 경계는 박스의 패딩을 둘러싸며, 특정 면의 패딩이 0이면 해당 면에서 패딩 경계는 콘텐츠 경계와 일치합니다. 패딩 경계의 네 면이 박스의 패딩 박스를 정의하며, 여기에 콘텐츠와 패딩 영역이 포함됩니다.
- 테두리 경계
- 테두리 경계는 박스의 테두리를 둘러싸며, 특정 면의 테두리가 0이면 해당 면에서 테두리 경계는 패딩 경계와 일치합니다. 테두리 경계의 네 면이 박스의 테두리 박스를 정의하며, 여기에 콘텐츠, 패딩, 테두리 영역이 포함됩니다.
- 마진 경계 또는 외부 경계
- 마진 경계는 박스의 마진을 둘러싸며, 특정 면의 마진이 0이면 해당 면에서 마진 경계는 테두리 경계와 일치합니다. 마진 경계의 네 면이 박스의 마진 박스를 정의하며, 여기에 박스의 모든 콘텐츠, 패딩, 테두리, 마진 영역이 포함됩니다.
2.2. 단편화
박스가 단편화될 때—줄이나 페이지를 넘어 여러 박스 단편으로 분리될 때—각 박스 (콘텐츠 박스, 패딩 박스, 테두리 박스, 마진 박스) 역시 단편화됩니다. 콘텐츠/패딩/테두리/마진 영역이 단편화에 어떻게 반응하는지는 [css-break-3]에서 지정되며, box-decoration-break 속성으로 제어됩니다.
2.3. 박스 경계 키워드
다음 <box> CSS 키워드는 다양한 박스 경계를 참조해야 하는 속성(예: transform-box 및 background-clip)에서 사용하기 위해 정의됩니다:
- content-box
- 콘텐츠 박스 또는 콘텐츠 경계를 참조합니다. (SVG 맥락에서는 fill-box로 처리됩니다.)
- padding-box
- 패딩 박스 또는 패딩 경계를 참조합니다. (SVG 맥락에서는 fill-box로 처리됩니다.)
- border-box
- 테두리 박스 또는 테두리 경계를 참조합니다. (SVG 맥락에서는 stroke-box로 처리됩니다.)
- margin-box
- 마진 박스 또는 마진 경계를 참조합니다. (SVG 맥락에서는 stroke-box로 처리됩니다.)
- fill-box
- 오브젝트 경계 박스 또는 그 경계를 참조합니다. (CSS 박스 맥락에서는 content-box로 처리됩니다.)
- stroke-box
- 스트로크 경계 박스 또는 그 경계를 참조합니다. (CSS 박스 맥락에서는 border-box로 처리됩니다.)
- view-box
-
가장 가까운 SVG 뷰포트 요소의 원점 박스를 참조합니다.
이는 해당 요소에 대해
viewBox속성으로 설정된 초기 SVG 사용자 좌표계의 너비와 높이를 가진 사각형이며, 좌상단이 좌표계 원점에 고정됩니다. (CSS 박스 맥락에서는 border-box로 처리됩니다.)참고:
viewBox에 min-x 또는 min-y 오프셋이 0이 아니면, 이 원점 박스는 실제로viewBox가 정의하는 가시 영역 사각형과 일치하지 않습니다!
편의를 위해 다음 값 타입이 자주 사용되는 <box>의 부분집합을 나타내도록 정의되어 있습니다:
<visual-box> = content-box | padding-box | border-box <layout-box> = <visual-box> | margin-box <paint-box> = <visual-box> | fill-box | stroke-box <coord-box> = <paint-box> | view-box
3. 마진
마진은 박스의 테두리 경계를 둘러싸며, 박스 사이의 간격을 제공합니다. margin 속성은 박스의 마진 영역의 두께를 지정합니다. margin 축약형 속성은 네 면의 마진을 모두 설정하며, margin 롱핸드 속성은 해당 면만 설정합니다. 본 절에서는 물리적 margin 롱핸드를 정의합니다. (추가적인 흐름 기준 margin 롱핸드는 [css-logical-1]에 정의되어 있습니다.)
참고: 블록 레이아웃에서 인접한 마진은 겹칠 수 있습니다. 자세한 내용은 CSS2§8.3.1 Collapsing Margins를 참조하세요. 또한, 단편화 분할과 인접한 마진은 때때로 잘릴 수 있습니다. 자세한 내용은 CSS Fragmentation 3 § 5.2 Adjoining Margins at Breaks를 참조하세요.
3.1. 페이지 기준(물리적) 마진 속성: margin-top, margin-right, margin-bottom, margin-left 속성
| 이름: | margin-top, margin-right, margin-bottom, margin-left |
|---|---|
| 값: | <length-percentage> | auto |
| 초기값: | 0 |
| 적용 대상: | 모든 요소(단, 내부 테이블 요소 제외) |
| 상속: | 아니오 |
| 백분율: | 포함 블록의 논리적 너비 기준 |
| 계산된 값: | 키워드 auto 또는 계산된 <length-percentage> 값 |
| 정식 순서: | 문법에 따름 |
| 애니메이션 타입: | 계산된 값 타입 기준 |
| 논리적 속성 그룹: | margin |
이 속성들은 각각 박스의 위, 오른쪽, 아래, 왼쪽 마진을 설정합니다.
margin 속성에 음수 값을 사용할 수 있지만, 구현별 제한이 있을 수 있습니다.
참고: 내부 루비 박스 [CSS-RUBY-1]에 대한 적용은 본 명세에서 정의되지 않습니다.
3.2. 마진 축약형: margin 속성
| 이름: | margin |
|---|---|
| 값: | <'margin-top'>{1,4} |
| 초기값: | 0 |
| 적용 대상: | 개별 속성 참조 |
| 상속: | 아니오 |
| 백분율: | 포함 블록의 논리적 너비 기준 |
| 계산된 값: | 개별 속성 참조 |
| 정식 순서: | 문법에 따름 |
| 애니메이션 타입: | 계산된 값 타입 기준 |
margin 속성은 margin-top, margin-right, margin-bottom, margin-left 를 한 번에 선언하는 축약형 속성입니다.
하나의 구성 값만 있으면 모든 면에 적용됩니다. 값이 두 개라면, 위와 아래 마진은 첫 번째 값, 오른쪽과 왼쪽 마진은 두 번째 값으로 설정됩니다. 값이 세 개라면, 위는 첫 번째 값, 왼쪽과 오른쪽은 두 번째 값, 아래는 세 번째 값으로 설정됩니다. 값이 네 개라면 각각 위, 오른쪽, 아래, 왼쪽 순서로 적용됩니다.
body { margin: 2em } /* 모든 마진이 2em으로 설정 */
body { margin: 1em 2em } /* 위 & 아래 = 1em, 오른쪽 & 왼쪽 = 2em */
body { margin: 1em 2em 3em } /* 위=1em, 오른쪽=2em, 아래=3em, 왼쪽=2em */
위 예시의 마지막 규칙은 아래 예시와 같습니다:
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* 반대쪽(오른쪽)에서 복사됨 */
}
4. 패딩
패딩은 박스의 콘텐츠 경계와 패딩 경계 사이에 삽입되어 콘텐츠와 테두리 사이의 간격을 제공합니다. 패딩 속성은 박스의 패딩 영역의 두께를 지정합니다. padding 축약형 속성은 네 면의 패딩을 모두 설정하며, 패딩 롱핸드 속성은 해당 면만 설정합니다. 본 절에서는 물리적 padding 롱핸드를 정의합니다. (추가적인 흐름 기준 padding 롱핸드는 [css-logical-1]에 정의되어 있습니다.)
참고: 박스에 지정된 배경은 기본적으로 패딩 경계 내에서 배치되고 그려집니다. (추가로 테두리 아래에도 칠해집니다, 테두리 영역에서.) 이 동작은 background-origin 및 background-clip 속성으로 조정할 수 있습니다.
4.1. 페이지 기준(물리적) 패딩 속성: padding-top, padding-right, padding-bottom, padding-left 속성
| 이름: | padding-top, padding-right, padding-bottom, padding-left |
|---|---|
| 값: | <length-percentage [0,∞]> |
| 초기값: | 0 |
| 적용 대상: | 모든 요소(단, 테이블 셀을 제외한 내부 테이블 요소는 제외) |
| 상속: | 아니오 |
| 백분율: | 포함 블록의 논리적 너비 기준 |
| 계산된 값: | 계산된 <length-percentage> 값 |
| 정식 순서: | 문법에 따름 |
| 애니메이션 타입: | 계산된 값 타입 기준 |
| 논리적 속성 그룹: | padding |
이 속성들은 각각 박스의 위, 오른쪽, 아래, 왼쪽 패딩을 설정합니다.
패딩 속성에 음수 값은 허용되지 않습니다.
참고: 내부 루비 박스 [CSS-RUBY-1]에 대한 적용은 본 명세에서 정의되지 않습니다.
4.2. 패딩 축약형: padding 속성
| 이름: | padding |
|---|---|
| 값: | <'padding-top'>{1,4} |
| 초기값: | 0 |
| 적용 대상: | 개별 속성 참조 |
| 상속: | 아니오 |
| 백분율: | 포함 블록의 논리적 너비 기준 |
| 계산된 값: | 개별 속성 참조 |
| 정식 순서: | 문법에 따름 |
| 애니메이션 타입: | 계산된 값 타입 기준 |
padding 속성은 padding-top, padding-right, padding-bottom, padding-left 를 한 번에 선언하는 축약형 속성입니다.
하나의 구성 값만 있으면 모든 면에 적용됩니다. 값이 두 개라면, 위와 아래 패딩은 첫 번째 값, 오른쪽과 왼쪽 패딩은 두 번째 값으로 설정됩니다. 값이 세 개라면, 위는 첫 번째 값, 왼쪽과 오른쪽은 두 번째 값, 아래는 세 번째 값으로 설정됩니다.
body { padding: 2em } /* 모든 패딩이 2em으로 설정 */
body { padding: 1em 2em } /* 위 & 아래 = 1em, 오른쪽 & 왼쪽 = 2em */
body { padding: 1em 2em 3em } /* 위=1em, 오른쪽=2em, 아래=3em, 왼쪽=2em */
위 예시의 마지막 규칙은 아래 예시와 같습니다:
body {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 2em; /* 반대쪽(오른쪽)에서 복사됨 */
}
5. 테두리
테두리는 테두리 영역을 채워 박스의 경계를 시각적으로 구분합니다. 테두리 속성은 박스의 테두리 영역 두께와 그리기 스타일, 색상을 지정합니다. 이러한 속성의 정의는 [css-backgrounds-3]를 참조하세요, 물리적 롱핸드 포함. (추가적인 흐름 기준 테두리 롱핸드는 [css-logical-1]에 정의되어 있습니다.)
6. 변경 사항
6.1. 최근 변경 사항
2023년 4월 6일 권고안 이후 편집상의 사소한 수정만 있었습니다:
-
§ 2 CSS 박스 모델에 소제목을 추가하고 문단을 이동함.
-
§ 1 소개에서 “문서 트리”를 “요소 트리”로 변경하여 [css-display-3]에서 사용되는 용어와 일치시킴.
-
속성 정의 테이블에 “논리적 속성 그룹” 행 추가.
6.2. CSS 2단계 이후 변경 사항
이 모듈은 CSS 2단계 이후 다음과 같은 변경이 있었습니다:
- 내부 루비 박스 적용을 이 단계에서 정의되지 않음으로 표시함.
- 수직 쓰기 모드를 고려하여 설명을 약간 수정함.
- [css-break-3]와 [css-backgrounds-3]의 관련 개념을 교차 연결함.
- 외부 명세에서 정의된 속성(예: background-clip 등)에서 다양한 박스 경계를 참조하는 키워드의 중앙 정의를 제공하여 반복(및 불가피한 동기화 오류)을 피함.
7. 프라이버시 고려사항
이 모듈에 대해 보고된 프라이버시 고려사항은 없습니다.
8. 보안 고려사항
이 모듈에 대해 보고된 보안 고려사항은 없습니다.