목차
요소의 박스(들)의 위치와 크기는 때때로 특정 직사각형, 즉 해당 요소의 컨테이닝 블록에 상대적으로 계산됩니다. 요소의 컨테이닝 블록은 다음과 같이 정의됩니다:
해당 상위 요소가 없다면, 컨테이닝 블록은 초기 컨테이닝 블록이 됩니다.
페이지 매체에서, 절대적으로 위치된 요소는 페이지 나누기를 무시하고 해당 컨테이닝 블록을 기준으로 위치합니다(문서가 연속적인 것처럼). 이 요소는 이후 여러 페이지에 걸쳐 나뉘어질 수 있습니다.
레이아웃 중인 페이지(현재 페이지)가 아닌 페이지에 위치하거나, 현재 페이지에서 이미 인쇄된 위치에 배치되는 절대적으로 위치된 콘텐츠의 경우, 프린터는 콘텐츠를 다음 중 하나로 배치할 수 있습니다:
참고로, 여러 페이지에 걸쳐 분할된 블록 수준 요소는 각 페이지에서 다른 너비를 가질 수 있으며, 장치별 제한이 있을 수 있습니다.
다음 문서에서 포지셔닝이 없는 경우, 컨테이닝 블록(C.B.)은 다음과 같이 설정됩니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>컨테이닝 블록의 예시</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">첫 번째 단락의 텍스트입니다...</P>
<P id="p2">텍스트 <EM id="em1"> 두 번째
<STRONG id="strong1">단락</STRONG>의 내용입니다.</EM></P>
</DIV>
</BODY>
</HTML>
컨테이닝 블록 설정:
| 생성된 박스 | 컨테이닝 블록 설정 |
|---|---|
| html | 초기 C.B. (UA-의존적) |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
"div1"을 포지셔닝하는 경우:
#div1 { position: absolute; left: 50px; top: 50px }
그 컨테이닝 블록은 더 이상 "body"가 아니며, 초기 컨테이닝 블록이 됩니다(다른 위치가 지정된 상위 박스가 없기 때문에).
"em1"도 포지셔닝하는 경우:
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
컨테이닝 블록 표는 다음과 같이 됩니다:
| 생성된 박스 | 컨테이닝 블록 설정 |
|---|---|
| html | 초기 C.B. (UA-의존적) |
| body | html |
| div1 | 초기 C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
"em1"을 포지셔닝함으로써, 해당 컨테이닝 블록은 가장 가까운 위치가 지정된 상위 박스(즉, "div1"에 의해 생성된 박스)가 됩니다.
| 이름: | width |
|---|---|
| 값: | <length> | <percentage> | auto | inherit |
| 초기값: | auto |
| 적용 대상: | 모든 요소(대체되지 않은 인라인 요소, 테이블 행 및 행 그룹 제외) |
| 상속됨: | 아니요 |
| 백분율: | 컨테이닝 블록의 너비 기준 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율, 'auto' 또는 절대 길이 |
이 속성은 박스의 콘텐츠 너비를 지정합니다.
이 속성은 대체되지 않은 인라인 요소에는 적용되지 않습니다. 대체되지 않은 인라인 요소의 박스 콘텐츠 너비는 렌더링된 콘텐츠의 너비입니다 (자식의 상대적 오프셋 이전). 인라인 박스는 라인 박스로 흐른다는 것을 기억하세요. 라인 박스의 너비는 컨테이닝 블록에 의해 결정되지만, 플로트의 존재로 인해 줄어들 수 있습니다.
값의 의미는 다음과 같습니다:
'width'에 대한 음수 값은 허용되지 않습니다.
예를 들어, 다음 규칙은 단락의 콘텐츠 너비를 100픽셀로 고정합니다:
p { width: 100px }
레이아웃에 사용되는 요소의 'width', 'margin-left', 'margin-right', 'left' 및 'right' 속성 값은 생성된 박스의 유형과 서로에 의존합니다. (레이아웃에 사용되는 값을 사용된 값이라고도 합니다.) 원칙적으로, 사용된 값은 계산된 값과 동일하지만, 'auto'는 적합한 값으로 대체되고, 백분율은 컨테이닝 블록을 기준으로 계산됩니다. 그러나 예외가 있습니다. 다음 상황을 구분해야 합니다:
1-6항 및 9-10항의 경우, 상대적으로 위치된 요소의 'left'와 'right' 값은 섹션 9.4.3의 규칙에 의해 결정됩니다.
참고. 아래에서 계산된 'width' 사용된 값은 잠정적인 값이며, 'min-width' 및 'max-width'에 따라 여러 번 계산해야 할 수도 있습니다. 아래의 최소 및 최대 너비 섹션을 참조하세요.
'width' 속성은 적용되지 않습니다. 'margin-left' 또는 'margin-right'의 계산된 값이 'auto'인 경우, 사용된 값은 '0'이 됩니다.
'margin-left' 또는 'margin-right'의 계산된 값이 'auto'인 경우, 사용된 값은 '0'이 됩니다.
만약 'height'와 'width'가 둘 다 'auto'로 계산된 값을 가지고 있으며, 요소가 고유 너비를 가지고 있다면, 그 고유 너비가 'width'의 사용된 값이 됩니다.
'height'와 'width'가 둘 다 'auto'로 계산된 값을 가지고 있고, 요소가 고유 너비는 없지만 고유 높이와 고유 비율을 가지고 있거나; 또는 'width'의 계산된 값이 'auto'이고, 'height'가 다른 계산된 값을 가지며, 요소가 고유 비율을 가지고 있다면; 'width'의 사용된 값은 다음과 같습니다:
(사용된 높이) * (고유 비율)
'height'와 'width'가 둘 다 'auto'로 계산된 값을 가지고 있고, 요소가 고유 비율은 있지만 고유 높이와 너비가 없다면, 'width'의 사용된 값은 CSS 2.2에서 정의되지 않습니다. 그러나, 만약 컨테이닝 블록의 너비가 대체된 요소의 너비에 의존하지 않는다면, 'width'의 사용된 값은 정상 흐름의 블록 수준 대체되지 않은 요소에 사용된 제약 방정식을 통해 계산됩니다.
그 외의 경우, 'width'의 계산된 값이 'auto'이고, 요소가 고유 너비를 가지고 있다면, 그 고유 너비가 'width'의 사용된 값이 됩니다.
그 외의 경우, 'width'의 계산된 값이 'auto'이지만 위 조건을 충족하지 않는 경우, 'width'의 사용된 값은 300px이 됩니다. 만약 300px이 장치에 맞기에는 너무 넓다면, 사용자 에이전트는 장치에 맞는 2:1 비율의 가장 큰 직사각형 너비를 사용해야 합니다.
다음 제약 조건은 다른 속성의 사용된 값들 사이에서 반드시 성립해야 합니다:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 컨테이닝 블록의 너비
'width'가 'auto'가 아니고 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (그리고 'margin-left' 또는 'margin-right' 중 'auto'가 아닌 값)이 컨테이닝 블록의 너비보다 크다면, 다음 규칙에 따라 'margin-left' 또는 'margin-right'의 'auto' 값은 0으로 처리됩니다.
위의 모든 값이 'auto'가 아닌 계산된 값을 가지고 있다면, 값들은 "과도하게 제약된" 것으로 간주되며, 사용된 값 중 하나는 계산된 값과 다르게 되어야 합니다. 만약 'direction' 속성이 'ltr'이라면, 'margin-right'의 지정된 값이 무시되고 동등성을 맞추기 위해 값이 계산됩니다. 'direction'이 'rtl'인 경우, 대신 'margin-left'에서 이러한 일이 발생합니다.
정확히 하나의 값이 'auto'로 지정된 경우, 동등성에 따라 사용된 값이 결정됩니다.
'width'가 'auto'로 설정된 경우, 다른 'auto' 값은 '0'이 되고 'width'는 결과적인 동등성에 따라 결정됩니다.
'margin-left'와 'margin-right'가 둘 다 'auto'라면, 사용된 값은 동일합니다. 이는 컨테이닝 블록의 가장자리에 대해 요소를 수평으로 중앙에 배치합니다.
'width'의 사용된 값은 인라인 대체 요소와 동일하게 결정됩니다. 그런 다음 블록 수준 대체되지 않은 요소에 대한 규칙이 적용되어 마진을 결정합니다.
'margin-left' 또는 'margin-right'가 'auto'로 계산된 경우, 사용된 값은 '0'입니다.
'width'가 'auto'로 계산된 경우, 사용된 값은 "shrink-to-fit" 너비입니다.
"shrink-to-fit" 너비 계산은 테이블 셀의 너비를 자동 테이블 레이아웃 알고리즘을 사용하여 계산하는 것과 유사합니다. 대략적으로: 명시적인 줄 바꿈이 발생하는 곳 외에는 줄을 나누지 않고 콘텐츠를 포맷하여 선호 너비를 계산하고, 가능한 모든 줄 바꿈을 시도하여 선호 최소 너비를 계산합니다. CSS 2.2는 정확한 알고리즘을 정의하지 않습니다. 세 번째로, 사용 가능한 너비를 찾습니다: 이 경우, 이는 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right' 및 관련 스크롤 바의 너비를 사용된 값으로 뺀 컨테이닝 블록의 너비입니다.
그런 다음 "shrink-to-fit" 너비는 다음과 같습니다: min(max(선호 최소 너비, 사용 가능한 너비), 선호 너비).
'margin-left' 또는 'margin-right'가 'auto'로 계산된 경우, 사용된 값은 '0'입니다. 'width'의 사용된 값은 인라인 대체 요소와 동일하게 결정됩니다.
이 섹션 및 다음 섹션의 목적상, "static position" (요소의)의 용어는 대략적으로 요소가 정상 흐름에서 가질 위치를 나타냅니다. 보다 정확하게는:
그러나 실제로 해당 가상 박스의 크기를 계산하는 대신, 사용자 에이전트는 예상 위치를 추정할 수 있습니다.
static position을 계산할 목적으로, 고정 위치된 요소의 컨테이닝 블록은 뷰포트 대신 초기 컨테이닝 블록이며, 모든 스크롤 가능한 박스는 원점까지 스크롤된 것으로 간주해야 합니다.
이러한 요소의 사용된 값을 결정하는 제약 조건은 다음과 같습니다:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 컨테이닝 블록의 너비
'left', 'width', 'right'가 모두 'auto'인 경우: 먼저 'margin-left'와 'margin-right'의 'auto' 값을 0으로 설정합니다. 그런 다음, static-position 컨테이닝 블록을 설정한 요소의 'direction' 속성이 'ltr'이면 'left'를 static position으로 설정하고 아래 규칙 3을 적용합니다; 그렇지 않으면, 'right'를 static position으로 설정하고 아래 규칙 1을 적용합니다.
셋 중 어느 것도 'auto'가 아닌 경우: 'margin-left'와 'margin-right'가 둘 다 'auto'라면, 두 마진 값이 동일한 값을 갖도록 추가 제약 조건 하에 방정식을 풉니다. 이로 인해 마진 값이 음수가 될 경우, 컨테이닝 블록의 방향이 'ltr' ('rtl')일 때 'margin-left' ('margin-right')를 0으로 설정하고 'margin-right' ('margin-left')를 풉니다. 'margin-left' 또는 'margin-right' 중 하나가 'auto'라면, 해당 값을 계산하여 방정식을 풉니다. 값이 과도하게 제약된 경우, 'left' ('rtl' 방향의 경우)를 무시하거나 'right' ('ltr' 방향의 경우)를 무시하고 해당 값을 풉니다.
그 외의 경우, 'margin-left'와 'margin-right'의 'auto' 값을 0으로 설정하고, 다음 여섯 가지 규칙 중 적용 가능한 하나를 선택합니다.
shrink-to-fit 너비 계산은 자동 테이블 레이아웃 알고리즘을 사용하여 테이블 셀의 너비를 계산하는 것과 유사합니다. 대략적으로: 명시적 줄 바꿈이 발생하는 곳 외에는 줄을 나누지 않고 콘텐츠를 포맷하여 선호 너비를 계산하고, 가능한 모든 줄 바꿈을 시도하여 선호 최소 너비를 계산합니다. CSS 2.2는 정확한 알고리즘을 정의하지 않습니다. 세 번째로, 사용 가능한 너비를 계산합니다: 이는 'left' (1번 경우) 또는 'right' (3번 경우)를 0으로 설정한 후 'width'를 풂으로써 찾을 수 있습니다.
그런 다음 shrink-to-fit 너비는 다음과 같습니다: min(max(선호 최소 너비, 사용 가능한 너비), 선호 너비).
이 경우, 10.3.7 절이 제약 방정식까지 적용되며, 10.3.7 절의 나머지 부분은 다음 규칙으로 대체됩니다:
'width'가 'auto'인 경우, 사용된 값은 플로팅 요소의 경우와 동일한 shrink-to-fit 너비입니다.
'margin-left' 또는 'margin-right'의 계산된 값이 'auto'인 경우, 사용된 값은 '0'이 됩니다.
인라인 대체 요소와 완전히 동일합니다.
| 이름: | min-width |
|---|---|
| 값: | <length> | <percentage> | inherit |
| 초기값: | 0 |
| 적용 대상: | 모든 요소(대체되지 않은 인라인 요소, 테이블 행 및 행 그룹 제외) |
| 상속됨: | 아니요 |
| 백분율: | 컨테이닝 블록의 너비 기준 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율 또는 절대 길이 |
| 이름: | max-width |
|---|---|
| 값: | <length> | <percentage> | none | inherit |
| 초기값: | none |
| 적용 대상: | 모든 요소(대체되지 않은 인라인 요소, 테이블 행 및 행 그룹 제외) |
| 상속됨: | 아니요 |
| 백분율: | 컨테이닝 블록의 너비 기준 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율, 절대 길이 또는 'none' |
이 두 속성은 작성자가 콘텐츠 너비를 특정 범위로 제한할 수 있도록 합니다. 값의 의미는 다음과 같습니다:
'min-width' 및 'max-width'에 대한 음수 값은 허용되지 않습니다.
CSS 2.2에서는 'min-width' 및 'max-width'가 테이블, 인라인 테이블, 테이블 셀, 테이블 열 및 열 그룹에 미치는 영향이 정의되지 않았습니다.
다음 알고리즘은 두 속성이 사용된 값에 미치는 영향을 설명합니다:
이 단계는 위의 속성의 실제 계산된 값에는 영향을 미치지 않습니다.
그러나 고유 비율을 가진 대체된 요소에서 'width'와 'height'가 모두 'auto'로 지정된 경우, 알고리즘은 다음과 같습니다:
적절한 제약 조건 위반에 대한 해결된 높이와 너비 값을 표에서 선택합니다. max-width와 max-height를 max(min, max)로 취하여 min ≤ max가 성립되도록 합니다. 이 표에서 w와 h는 'min-width', 'min-height', 'max-width' 및 'max-height' 속성을 무시했을 때의 너비 및 높이 계산 결과를 나타냅니다. 일반적으로 이는 고유 너비와 높이이지만, 고유 비율을 가진 대체된 요소의 경우 그렇지 않을 수 있습니다.
참고: 너비 또는 높이가 명시적으로 설정되고 다른 차원이 auto로 설정된 경우, auto 측면에 최소 또는 최대 제약을 적용하면 과도 제약 상황이 발생할 수 있습니다. 명세는 이 상황에서의 동작을 명확히 정의하고 있지만, 이는 작성자가 예상한 바와 다를 수 있습니다. 이 상황에서 CSS3 object-fit 속성을 사용하여 다른 결과를 얻을 수 있습니다.
| 제약 조건 위반 | 해결된 너비 | 해결된 높이 |
|---|---|---|
| 없음 | w | h |
| w > max-width | max-width | max(max-width * h/w, min-height) |
| w < min-width | min-width | min(min-width * h/w, max-height) |
| h > max-height | max(max-height * w/h, min-width) | max-height |
| h < min-height | min(min-height * w/h, max-width) | min-height |
| (w > max-width) and (h > max-height), where (max-width/w ≤ max-height/h) | max-width | max(min-height, max-width * h/w) |
| (w > max-width) and (h > max-height), where (max-width/w > max-height/h) | max(min-width, max-height * w/h) | max-height |
| (w < min-width) and (h < min-height), where (min-width/w ≤ min-height/h) | min(max-width, min-height * w/h) | min-height |
| (w < min-width) and (h < min-height), where (min-width/w > min-height/h) | min-width | min(max-height, min-width * h/w) |
| (w < min-width) and (h > max-height) | min-width | max-height |
| (w > max-width) and (h < min-height) | max-width | min-height |
그런 다음 위의 "너비와 마진 계산" 규칙을 적용합니다. 이때 'width'가 이 값으로 계산된 것처럼 처리됩니다.
| 이름: | height |
|---|---|
| 값: | <length> | <percentage> | auto | inherit |
| 초기값: | auto |
| 적용 대상: | 모든 요소(대체되지 않은 인라인 요소, 테이블 열 및 열 그룹 제외) |
| 상속됨: | 아니요 |
| 백분율: | 본문 참조 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율 또는 'auto' (지정된 대로) 또는 절대 길이 |
이 속성은 박스의 콘텐츠 높이를 지정합니다.
이 속성은 대체되지 않은 인라인 요소에는 적용되지 않습니다. 대신 사용되는 규칙은 대체되지 않은 인라인 요소의 높이와 마진 계산 섹션을 참조하세요.
값의 의미는 다음과 같습니다:
참고: 절대적으로 위치된 요소의 컨테이닝 블록의 높이는 요소 자체의 크기와 독립적이며, 따라서 이러한 요소에서의 백분율 높이는 항상 해결될 수 있습니다. 그러나, 문서에서 나중에 오는 요소들이 처리된 후에야 높이를 알 수 있는 경우가 있을 수 있습니다.
'height'에 대한 음수 값은 허용되지 않습니다.
예를 들어, 다음 규칙은 단락의 콘텐츠 높이를 100픽셀로 설정합니다:
p { height: 100px }
내용의 높이가 100픽셀을 초과하는 단락은 오버플로우되며, 'overflow' 속성에 따라 처리됩니다.
'top', 'margin-top', 'height', 'margin-bottom', 그리고 'bottom' 값을 계산하기 위해서는 다양한 박스 유형을 구분해야 합니다:
1-6항 및 9-10항의 경우, 'top' 및 'bottom'의 사용된 값은 9.4.3절의 규칙에 따라 결정됩니다.
참고: 이러한 규칙은 다른 요소와 마찬가지로 루트 요소에도 적용됩니다.
참고. 아래에서 계산된 'height' 사용된 값은 잠정적인 값이며, 'min-height' 및 'max-height'에 따라 여러 번 계산해야 할 수도 있습니다. 아래의 최소 및 최대 높이 섹션을 참조하세요.
'height' 속성은 적용되지 않습니다. 콘텐츠 영역의 높이는 폰트를 기준으로 해야 하지만, 이 명세에서는 그 방법을 지정하지 않습니다. 사용자 에이전트는 예를 들어, em-box나 폰트의 최대 상승자 및 하강자를 사용할 수 있습니다. (후자는 em-box 위나 아래에 부분이 있는 글리프가 여전히 콘텐츠 영역 내에 포함되도록 보장하지만, 폰트마다 상자 크기가 다르게 되는 결과를 초래합니다. 전자는 작성자가 'line-height'에 상대적으로 배경 스타일링을 제어할 수 있도록 보장하지만, 글리프가 자신의 콘텐츠 영역 밖으로 그려지게 됩니다.)
참고: CSS의 3단계에서는 콘텐츠 높이에 사용되는 폰트 측정을 선택할 수 있는 속성이 포함될 가능성이 있습니다.
인라인, 대체되지 않은 박스의 수직 패딩, 테두리 및 마진은 콘텐츠 영역의 상단과 하단에서 시작되며, 'line-height'와는 관련이 없습니다. 그러나 'line-height'만이 라인 박스의 높이를 계산할 때 사용됩니다.
여러 폰트가 사용되는 경우(예: 서로 다른 폰트에서 글리프가 발견될 때 발생할 수 있음), 콘텐츠 영역의 높이는 이 명세에서 정의되지 않습니다. 그러나, 콘텐츠 영역의 높이는 해당 요소의 모든 폰트에 대해 (1) em-box, 또는 (2) 최대 상승자 및 하강자가 충분히 포함되도록 선택할 것을 제안합니다. 이는 폰트의 기준선 정렬에 따라 관련된 폰트 크기보다 클 수 있습니다.
'margin-top' 또는 'margin-bottom'이 'auto'인 경우, 사용된 값은 0입니다.
'height'와 'width'가 둘 다 'auto'로 계산된 값을 가지고 있으며, 요소가 고유 높이를 가지고 있다면, 그 고유 높이가 'height'의 사용된 값이 됩니다.
그 외의 경우, 'height'의 계산된 값이 'auto'이고, 요소가 고유 비율을 가지는 경우, 'height'의 사용된 값은 다음과 같습니다:
(사용된 너비) / (고유 비율)
그 외의 경우, 'height'의 계산된 값이 'auto'이고, 요소가 고유 높이를 가지고 있다면, 그 고유 높이가 'height'의 사용된 값이 됩니다.
그 외의 경우, 'height'의 계산된 값이 'auto'이지만, 위 조건을 충족하지 않는 경우, 'height'의 사용된 값은 2:1 비율을 가지며, 높이가 150px을 초과하지 않고, 너비가 장치 너비를 초과하지 않는 가장 큰 직사각형의 높이로 설정되어야 합니다.
이 섹션은 또한 'overflow'가 'visible'로 계산되지 않았지만 뷰포트로 전파된 정상 흐름의 블록 수준 대체되지 않은 요소에도 적용됩니다.
'margin-top' 또는 'margin-bottom'이 'auto'인 경우, 사용된 값은 0입니다. 'height'가 'auto'인 경우, 높이는 요소가 블록 수준 자식을 가지고 있는지 여부와 패딩 또는 테두리를 가지고 있는지 여부에 따라 달라집니다:
요소의 높이는 콘텐츠 상단 가장자리부터 다음 중 첫 번째 해당하는 항목까지의 거리입니다:
정상 흐름에 있는 자식만 고려됩니다(즉, 플로팅 박스와 절대적으로 위치된 박스는 무시되며, 상대적으로 위치된 박스는 오프셋 없이 고려됩니다). 자식 박스는 익명 블록 박스일 수 있습니다.
이 섹션과 다음 섹션의 목적상, "static position"(요소의)이라는 용어는 대략적으로 요소가 정상 흐름에서 가질 위치를 나타냅니다. 보다 정확하게는, 'top'의 static position은 컨테이닝 블록의 상단 가장자리에서 가상 박스의 상단 마진 가장자리까지의 거리이며, 이 박스는 요소의 지정된 'position' 값이 'static'이고, 지정된 'float'가 'none', 지정된 'clear'가 'none'이었을 경우 요소의 첫 번째 박스가 되었을 것입니다. (9.7절의 규칙에 따라, 'display'의 다른 계산된 값을 가정해야 할 수도 있다는 점에 유의하십시오.) 값은 가상 박스가 컨테이닝 블록 위에 있을 경우 음수입니다.
그러나 실제로 해당 가상 박스의 크기를 계산하는 대신, 사용자 에이전트는 예상 위치를 추정할 수 있습니다.
static position을 계산할 목적으로, 고정 위치된 요소의 컨테이닝 블록은 뷰포트 대신 초기 컨테이닝 블록입니다.
절대적으로 위치된 요소의 경우, 수직 치수의 사용된 값은 다음 제약 조건을 만족해야 합니다:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 컨테이닝 블록의 높이
'top', 'height', 'bottom'이 모두 auto인 경우, 'top'을 static position으로 설정하고 아래의 규칙 3을 적용합니다.
셋 중 어느 것도 'auto'가 아닌 경우: 'margin-top'과 'margin-bottom'이 둘 다 'auto'인 경우, 두 마진 값이 동일한 값을 갖도록 추가 제약 조건 하에 방정식을 풉니다. 'margin-top' 또는 'margin-bottom' 중 하나가 'auto'인 경우, 해당 값을 계산하여 방정식을 풉니다. 값이 과도하게 제약된 경우, 'bottom' 값을 무시하고 해당 값을 풉니다.
그 외의 경우, 다음 여섯 가지 규칙 중 적용 가능한 하나를 선택합니다:
이 상황은 이전 상황과 비슷하지만, 요소가 고유 높이를 가지고 있다는 점이 다릅니다. 대체 순서는 다음과 같습니다:
이 섹션은 다음에 적용됩니다:
'margin-top' 또는 'margin-bottom'이 'auto'인 경우, 사용된 값은 0입니다. 'height'가 'auto'인 경우, 높이는 10.6.7에 따라 요소의 자손에 의존합니다.
'인라인-블록' 요소의 경우, 라인 박스의 높이를 계산할 때 마진 박스를 사용합니다.
특정 경우(예: 10.6.4 및 10.6.6 섹션 참조), 블록 포맷팅 컨텍스트를 설정하는 요소의 높이는 다음과 같이 계산됩니다:
인라인 수준의 자식만 있는 경우, 높이는 최상단 라인 박스의 상단부터 최하단 라인 박스의 하단까지의 거리입니다.
블록 수준의 자식이 있는 경우, 높이는 최상단 블록 수준 자식 박스의 상단 마진 가장자리와 최하단 블록 수준 자식 박스의 하단 마진 가장자리 사이의 거리입니다.
절대적으로 위치된 자식은 무시되며, 상대적으로 위치된 박스는 오프셋 없이 고려됩니다. 자식 박스는 익명 블록 박스일 수 있습니다.
또한, 요소의 하단 콘텐츠 가장자리 아래에 하단 마진 가장자리가 있는 플로팅 자손이 있는 경우, 높이는 해당 가장자리를 포함하도록 증가합니다. 이 블록 포맷팅 컨텍스트에 참여하는 플로트만 고려됩니다. 예를 들어, 절대적으로 위치된 자손 내부 또는 다른 플로트 내부의 플로트는 제외됩니다.
요소의 높이를 특정 범위로 제한하는 것이 유용할 때가 있습니다. 두 가지 속성이 이 기능을 제공합니다:
| 이름: | min-height |
|---|---|
| 값: | <length> | <percentage> | inherit |
| 초기값: | 0 |
| 적용 대상: | 모든 요소(대체되지 않은 인라인 요소, 테이블 열 및 열 그룹 제외) |
| 상속됨: | 아니요 |
| 백분율: | 본문 참조 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율 또는 절대 길이 |
| 이름: | max-height |
|---|---|
| 값: | <length> | <percentage> | none | inherit |
| 초기값: | none |
| 적용 대상: | 모든 요소(대체되지 않은 인라인 요소, 테이블 열 및 열 그룹 제외) |
| 상속됨: | 아니요 |
| 백분율: | 본문 참조 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율, 절대 길이 또는 'none' |
이 두 속성은 작성자가 박스 높이를 특정 범위로 제한할 수 있도록 합니다. 값의 의미는 다음과 같습니다:
'min-height' 및 'max-height'에 대한 음수 값은 허용되지 않습니다.
CSS 2.2에서는 'min-height' 및 'max-height'가 테이블, 인라인 테이블, 테이블 셀, 테이블 행 및 행 그룹에 미치는 영향이 정의되지 않았습니다.
다음 알고리즘은 두 속성이 사용된 값에 미치는 영향을 설명합니다:
이 단계는 'height'의 실제 계산된 값에 영향을 미치지 않습니다. 따라서, 예를 들어, 계산된 값에 의존하는 마진 병합에는 영향을 미치지 않습니다.
그러나 'width'와 'height'가 모두 'auto'로 계산된 대체된 요소의 경우, 위의 최소 및 최대 너비 아래의 알고리즘을 사용하여 사용된 너비와 높이를 찾습니다. 그런 다음 위의 "높이와 마진 계산" 규칙을 적용하여, 결과 너비와 높이를 계산된 값인 것처럼 사용합니다.
인라인 포맷팅 컨텍스트 섹션에서 설명한 바와 같이, 사용자 에이전트는 인라인 수준 박스를 라인 박스의 수직 스택으로 흐르게 합니다. 라인 박스의 높이는 다음과 같이 결정됩니다:
빈 인라인 요소는 빈 인라인 박스를 생성하지만, 이러한 박스는 여전히 마진, 패딩, 테두리 및 줄 높이를 가지며, 따라서 내용이 있는 요소와 마찬가지로 이러한 계산에 영향을 미칩니다.
CSS는 모든 폰트가 기준선 위의 특성 높이와 기준선 아래의 깊이를 지정하는 폰트 메트릭스를 가지고 있다고 가정합니다. 이 섹션에서는 A를 기준선 위의 높이 (주어진 폰트와 크기에 대해), D를 깊이로 사용합니다. 또한 AD = A + D, 즉 상단에서 하단까지의 거리를 정의합니다. (TrueType 및 OpenType 폰트에서 A와 D를 찾는 방법에 대한 아래의 참고를 참조하십시오.) 이는 폰트 전체의 메트릭스이며, 개별 글리프의 상승자와 하강자와 반드시 일치할 필요는 없습니다.
사용자 에이전트는 대체되지 않은 인라인 박스의 글리프를 관련 기준선에 따라 서로 정렬해야 합니다. 그런 다음 각 글리프에 대해 A와 D를 결정합니다. 하나의 요소 내의 글리프는 서로 다른 폰트에서 올 수 있으므로, 모든 글리프가 동일한 A와 D를 가져야 할 필요는 없습니다. 인라인 박스에 글리프가 전혀 포함되어 있지 않으면, 해당 요소의 첫 번째 사용 가능한 폰트의 A와 D를 가진 스투르트(너비가 0인 보이지 않는 글리프)를 포함하는 것으로 간주됩니다.
여전히 각 글리프에 대해, 추가할 행간 L을 결정합니다. 여기서 L = 'line-height' - AD. 행간의 절반은 A 위에, 나머지 절반은 D 아래에 추가되어, 글리프와 그 행간은 기준선 위로 A' = A + L/2, 기준선 아래로 D' = D + L/2의 총 높이를 가집니다.
참고. L은 음수일 수 있습니다.
인라인 박스의 높이는 모든 글리프와 그 절반 행간을 포함하며, 정확히 'line-height'입니다. 자식 요소의 박스는 이 높이에 영향을 미치지 않습니다.
비록 대체되지 않은 요소의 마진, 테두리 및 패딩은 라인 박스 계산에 포함되지 않더라도, 여전히 인라인 박스를 둘러싸고 렌더링됩니다. 이는 'line-height'에 의해 지정된 높이가 포함된 박스의 콘텐츠 높이보다 작을 경우, 패딩 및 테두리의 배경과 색상이 인접 라인 박스로 "번질" 수 있음을 의미합니다. 사용자 에이전트는 문서 순서대로 박스를 렌더링해야 합니다. 이는 이후 라인의 테두리가 이전 라인의 테두리와 텍스트 위에 그려지도록 합니다.
참고. CSS 2.2는 인라인 박스의 콘텐츠 영역이 무엇인지 (10.6.1 참조) 정의하지 않으므로, 서로 다른 사용자 에이전트는 배경과 테두리를 서로 다른 위치에 그릴 수 있습니다.
참고. OpenType 또는 TrueType 폰트를 사용하는 구현에서는 폰트의 OS/2 테이블에서 "sTypoAscender"와 "sTypoDescender" 메트릭스를 (현재 요소의 폰트 크기로 스케일링한 후) A와 D로 사용하는 것이 권장됩니다. 이러한 메트릭스가 없는 경우, HHEA 테이블의 "Ascent" 및 "Descent" 메트릭스를 사용해야 합니다.
| 이름: | line-height |
|---|---|
| 값: | normal | <number> | <length> | <percentage> | inherit |
| 초기값: | normal |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | 요소 자체의 폰트 크기 기준 |
| 미디어: | 시각적 |
| 계산값: | <length> 및 <percentage>의 경우 절대 값; 그 외에는 지정된 대로 |
콘텐츠가 인라인 수준 요소로 구성된 블록 컨테이너 요소에서 'line-height'는 요소 내 라인 박스의 최소 높이를 지정합니다. 최소 높이는 기준선 위의 최소 높이와 기준선 아래의 최소 깊이로 구성되며, 이는 각 라인 박스가 해당 요소의 폰트와 줄 높이 속성을 가진 너비가 0인 인라인 박스로 시작하는 것과 정확히 같습니다. 이 가상의 박스를 "스투르트(strut)"라고 부릅니다. (이 이름은 TeX에서 영감을 받았습니다.)
기준선 위와 아래의 폰트 높이와 깊이는 폰트에 포함된 메트릭스라고 가정합니다. (자세한 내용은 CSS 레벨 3을 참조하십시오.)
대체되지 않은 인라인 요소에서 'line-height'는 라인 박스 높이 계산에 사용되는 높이를 지정합니다.
이 속성의 값은 다음과 같은 의미를 가집니다:
아래 예제의 세 규칙은 동일한 결과 줄 높이를 가집니다:
div { line-height: 1.2; font-size: 10pt } /* 숫자 */
div { line-height: 1.2em; font-size: 10pt } /* 길이 */
div { line-height: 120%; font-size: 10pt } /* 백분율 */
요소가 여러 폰트로 렌더링된 텍스트를 포함하는 경우, 사용자 에이전트는 가장 큰 폰트 크기를 기준으로 'normal' 'line-height' 값을 결정할 수 있습니다.
참고. 모든 인라인 박스에서 'line-height' 값이 동일하고 동일한 폰트를 사용하며(대체된 요소, 인라인-블록 요소 등이 없고), 블록 컨테이너 박스에서 위와 같은 조건이 충족될 경우, 연속적인 라인의 기준선이 정확히 'line-height'만큼 떨어지게 됩니다. 이는 예를 들어, 서로 다른 폰트를 사용하는 텍스트 열이 정렬되어야 하는 테이블에서 중요합니다.
| 이름: | vertical-align |
|---|---|
| 값: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| 초기값: | baseline |
| 적용 대상: | 인라인 수준 및 'table-cell' 요소 |
| 상속됨: | 아니요 |
| 백분율: | 요소 자체의 'line-height'를 기준으로 합니다. |
| 미디어: | 시각적 |
| 계산값: | <percentage> 및 <length>의 경우 절대 길이, 그 외에는 지정된 대로 |
이 속성은 인라인 수준 요소가 생성한 박스의 라인 박스 내 수직 위치에 영향을 미칩니다.
참고. 이 속성의 값은 테이블 컨텍스트에서 다른 의미를 가집니다. 자세한 내용은 테이블 높이 알고리즘 섹션을 참조하십시오.
다음 값은 부모 인라인 요소 또는 부모 블록 컨테이너 요소의 스투르트와 관련하여 의미를 가집니다.
다음 정의에서, 대체되지 않은 인라인 요소의 경우, 정렬에 사용되는 박스는 'line-height' 높이를 가지는 박스입니다(박스의 글리프와 각 측면의 절반 행간을 포함, 위 참조). 다른 모든 요소의 경우, 정렬에 사용되는 박스는 마진 박스입니다.
다음 값은 요소를 라인 박스와 상대적으로 정렬합니다. 요소는 이를 기준으로 정렬된 하위 트리를 가질 수 있으므로(그 하위 요소도 이에 따라 정렬된 자손을 가질 수 있음), 이러한 값은 정렬된 하위 트리의 경계를 사용합니다. 인라인 요소의 정렬된 하위 트리는 해당 요소와 계산된 'vertical-align' 값이 'top' 또는 'bottom'이 아닌 모든 자식 인라인 요소의 정렬된 하위 트리를 포함합니다. 정렬된 하위 트리의 상단은 하위 트리 박스의 상단 중 가장 높은 값을, 하단은 하단 중 가장 낮은 값을 의미합니다.
'inline-table'의 기준선은 테이블 첫 번째 행의 기준선입니다.
'inline-block'의 기준선은 정상 흐름에서 마지막 라인 박스의 기준선입니다. 인플로우 라인 박스가 없거나 'overflow' 속성의 계산된 값이 'visible'이 아닌 경우, 기준선은 하단 마진 가장자리입니다.