CSS 박스 모델 모듈 레벨 4

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 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이면 해당 면에서 마진 경계는 테두리 경계와 일치합니다. 마진 경계의 네 면이 박스의 마진 박스를 정의하며, 여기에 박스의 모든 콘텐츠, 패딩, 테두리, 마진 영역이 포함됩니다.

border-radius와 같은 속성은 박스의 경계의 도형(모서리)과 클리핑을 변경할 수 있습니다(자세한 내용은 CSS Backgrounds 3 § 4.3 Corner Clipping 참조); 이러한 효과는 일반적으로 레이아웃에는 영향을 주지 않습니다. 구분을 위해 명세에서는 적절한 모양이 적용된 경계(shaped edge) 또는 모양이 적용되지 않은 경계(unshaped edge)를 참조할 수 있습니다.

2.2. 단편화

박스가 단편화될 때—줄이나 페이지를 넘어 여러 박스 단편으로 분리될 때—각 박스 (콘텐츠 박스, 패딩 박스, 테두리 박스, 마진 박스) 역시 단편화됩니다. 콘텐츠/패딩/테두리/마진 영역이 단편화에 어떻게 반응하는지는 [css-break-4]에서 지정되며, 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 뷰포트의 원점 박스(origin box)를 참조합니다. 이는 SVG 뷰포트의 너비와 높이를 가진 사각형이며, 좌상단이 좌표계 원점에 고정됩니다. (CSS 박스 맥락에서는 border-box로 처리됩니다.)

참고: SVG 뷰포트가 원점에 고정되어 있지 않으면, 이 원점 박스는 실제로 SVG 뷰포트와 일치하지 않습니다!

편의를 위해 다음 값 타입이 자주 사용되는 <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 롱핸드를 정의합니다; CSS 논리 속성 1 § 4.2 흐름 기준 마진: margin-block-start, margin-block-end, margin-inline-start, margin-inline-end 속성과 margin-block, margin-inline 축약형 속성은 추가적으로 흐름 기준 margin 롱핸드를 정의합니다. 두 종류의 속성 모두 동일한 마진 집합을 제어하며, 각 측면을 인덱싱하는 방식만 다릅니다.

참고: 블록 레이아웃에서 인접한 마진은 겹칠 수 있습니다. 자세한 내용은 CSS2§8.3.1 Collapsing Margins를 참조하세요. 또한, 단편화 분할과 인접한 마진은 때때로 잘릴 수 있습니다. 자세한 내용은 CSS Fragmentation 4 § 5.2 Adjoining Margins at Breaks: margin-break 속성을 참조하세요.

3.1. 페이지 기준(물리적) 마진 속성: margin-top, margin-right, margin-bottom, margin-left 속성

이 속성들은 각각 박스의 위, 오른쪽, 아래, 왼쪽 마진을 설정합니다.

margin 속성에 음수 값을 사용할 수 있지만, 구현별 제한이 있을 수 있습니다.

3.2. 마진 축약형: margin 속성

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; /* 반대쪽(오른쪽)에서 복사됨 */
}

3.3. 컨테이너 경계의 마진: margin-trim 속성

형제 요소 사이에는 마진이 필요하지만 컨테이너의 시작/끝 부분에는 패딩으로 간격을 제어할 수 있는 경우가 많습니다. 이 속성은 컨테이너가 자식의 마진이 컨테이너 경계와 맞닿을 경우 해당 마진을 잘라낼 수 있게 해줍니다. 값의 의미는 다음과 같습니다:

none

마진은 컨테이너에 의해 잘라내지지 않습니다.

참고: 하지만 블록 레이아웃에서는 자식 마진이 부모와 겹칠 수 있습니다. 자세한 내용은 CSS2§8.3.1: Collapsing Margins를 참조하세요.

block-start

inline-start

inline-end

block-end

이 박스에 포함된 흐름 내(in-flow) 박스에 대해, 박스의 지정된 경계와 인접한 마진은 0으로 잘립니다. 또한 해당 마진과 겹치는 자손 마진도 잘리지만 (자기 자신의, 형제의, 조상의 마진은 잘리지 않습니다).

block

block-start block-end으로 계산됨.

inline

inline-start inline-end으로 계산됨.

참고: 가장 짧은 직렬화 원칙에 따라, 계산된 값이 block 또는 inline과 동등하면 해당 키워드로 직렬화됩니다.

인접성(adjacency)은 박스 정렬 [CSS-ALIGN-3]에 의해 제어되는 공간에는 민감하지 않으며, 겹쳐진 박스는 무시합니다(자세한 내용은 CSS Flexbox 1 § 4.4 Collapsed Items 참조) 그리고 트랙(CSS Grid Layout 1 § 7.2.3.2 Repeat-to-fill: auto-fill 및 auto-fit 반복 참조)도 무시합니다.

참고: margin-break 속성도 참고하세요. 이 속성은 박스의 자체 마진이 단편화 분할(페이지 분할/컬럼 분할 등)과 맞닿을 때 적용됩니다.

이 속성이 박스가 단편화 컨텍스트를 생성하는 경우 분할에서 마진에 어떻게 영향을 주는지 정의하세요. 이슈 3314도 참고하세요.

참고: 이 속성은 블록 컨테이너에서 floats의 마진에는 영향을 주지 않습니다; 향후 단계에서 floats에 대한 별도 컨트롤이 도입될 수 있습니다.

3.3.1. 블록 컨테이너 내용 잘라내기

블록 컨테이너에 대해, margin-trim 속성은 다음을 제거합니다:

• block-start 경계를 다듬을 때, 블록 레벨 첫 번째 자식의 block-start 마진
• block-end 경계를 다듬을 때, 블록 레벨 마지막 자식의 block-end 마진
• 이 마진들과 겹치는 모든 마진

인라인 축의 블록 레벨 자손의 마진이나, 인라인 레벨 자손의 마진에는 영향을 주지 않습니다.

3.3.2. 플렉스 컨테이너 내용 잘라내기

플렉스 컨테이너에 대해, margin-trim 속성은 다음을 제거합니다:

• 주 축과 평행한 경계를 다듬을 때, 가장 가까운 플렉스 라인에 있는 각 플렉스 아이템의 해당 마진
• 교차 축과 평행한 경계를 다듬을 때, 각 플렉스 라인의 첫 번째/마지막 플렉스 아이템의 해당 마진

이 과정에서는 겹쳐진 플렉스 아이템은 무시합니다.

3.3.3. 그리드 컨테이너 내용 잘라내기

그리드 컨테이너에 대해, margin-trim 속성은 박스 경계와 인접한 그리드 트랙에 있는 각 그리드 아이템의 해당 마진을 제거합니다.

이 과정에서는 겹쳐진 그리드 트랙은 무시합니다. 그 외에는 빈 그리드 트랙을 무시하지 않습니다.

4. 패딩

패딩은 박스의 콘텐츠 경계와 패딩 경계 사이에 삽입되어 콘텐츠와 테두리 사이의 간격을 제공합니다. 패딩 속성은 박스의 패딩 영역의 두께를 지정합니다. padding 축약형 속성은 네 면의 패딩을 모두 설정하며, 패딩 롱핸드 속성은 해당 면만 설정합니다. 이 명세는 물리적 padding 롱핸드를 정의합니다; CSS 논리 속성 1 § 4.4 흐름 기준 패딩: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end 속성과 padding-block, padding-inline 축약형 속성은 추가적으로 흐름 기준 padding 롱핸드를 정의합니다. 두 종류의 속성 모두 동일한 패딩 집합을 제어하며, 각 측면을 인덱싱하는 방식만 다릅니다.

참고: 박스에 지정된 배경은 기본적으로 패딩 경계 내에서 배치되고 그려집니다. (추가로 테두리 아래에도 칠해집니다, 테두리 영역에서.) 이 동작은 background-origin 및 background-clip 속성으로 조정할 수 있습니다.

4.1. 페이지 기준(물리적) 패딩 속성: padding-top, padding-right, padding-bottom, padding-left 속성

이 속성들은 각각 박스의 위, 오른쪽, 아래, 왼쪽 패딩을 설정합니다.

패딩 속성에 음수 값은 허용되지 않습니다.

4.2. 패딩 축약형: padding 속성

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 § 3 Borders를 참조하세요; CSS 논리 속성 1 § 4.5 흐름 기준 테두리는 추가적으로 흐름 기준 테두리 롱핸드도 정의합니다. 두 종류의 속성 모두 동일한 테두리 집합을 제어하며, 각 측면을 인덱싱하는 방식만 다릅니다.

6. 최근 변경 사항

2024년 4월 1일 워킹 드래프트 이후 변경 사항:

• block 및 inline 키워드를 margin-trim에서 조합할 수 있도록 함. (이슈 7884)

• 모양이 적용된 경계(shaped edge)와 모양이 적용되지 않은 경계(unshaped edge) 용어를 도입하여 개념 간 참조가 쉬워짐. (이슈 5132)

2022년 11월 3일 워킹 드래프트 이후 변경 사항:

• margin-trim이 floats에 미치는 영향을 제거함, 잘라내기와 잘라내지 않기 모두 사용 사례가 있고 구현이 복잡하기 때문. (이슈 8547)

• 자기 자신이나 형제의 마진이 잘린 마진과 겹쳤더라도 margin-trim에 의해 잘리는 것은 자손 마진뿐임을 명확히 함.

• 모양이 적용된 및 모양이 적용되지 않은 경계 용어를 도입하여 박스 개념을 명확히 함. (이슈 5132)

7. CSS 3단계 이후 변경 사항

이 모듈은 3단계 이후 다음과 같은 변경이 있었습니다:

• margin-trim 속성 추가.

8. CSS 2단계 이후 변경 사항

이 모듈은 2단계 이후 다음과 같은 변경이 있었습니다:

• 수직 쓰기 모드를 고려하여 설명을 약간 수정함.
• margin, padding 및 각 롱핸드가 루비 베이스 컨테이너와 루비 주석 컨테이너에도 적용된다는 점을 정의함

9. 프라이버시 고려사항

이 모듈에 대해 보고된 프라이버시 고려사항은 없습니다.

10. 보안 고려사항

이 모듈에 대해 보고된 보안 고려사항은 없습니다.