목차
CSS 박스 모델은 문서 트리에서 생성된 요소의 직사각형 박스를 설명하며 시각적 형식 모델에 따라 배치됩니다.
각 박스는 내용 영역(예: 텍스트, 이미지 등)과 선택적으로 패딩, 테두리, 마진 영역을 포함할 수 있습니다. 각 영역의 크기는 아래 정의된 속성으로 지정됩니다. 다음 다이어그램은 이러한 영역 간의 관계와 마진, 테두리, 패딩의 일부를 지칭하는 용어를 보여줍니다.
마진, 테두리 및 패딩은 상단, 오른쪽, 하단, 왼쪽 세그먼트로 나뉠 수 있습니다(예: 다이어그램에서 "LM"은 왼쪽 마진, "RP"는 오른쪽 패딩, "TB"는 상단 테두리 등).
각 네 영역(내용, 패딩, 테두리, 마진)의 둘레는 "엣지"라고 하며, 따라서 각 박스에는 네 개의 엣지가 있습니다.
각 엣지는 상단, 오른쪽, 하단, 왼쪽 엣지로 나뉠 수 있습니다.
박스의 내용 영역 크기 — 내용 너비 및 내용 높이 — 는 여러 요인에 따라 달라집니다. 박스를 생성하는 요소에 'width' 또는 'height' 속성이 설정되어 있는지, 박스가 텍스트 또는 다른 박스를 포함하는지, 박스가 표인지 등이 이에 영향을 미칩니다. 박스 너비와 높이에 대해서는 시각적 형식 모델 세부 사항 장에서 논의됩니다.
박스의 내용, 패딩 및 테두리 영역의 배경 스타일은 생성 요소의 'background' 속성으로 지정됩니다. 마진 배경은 항상 투명합니다.
이 예는 여백, 패딩 및 테두리가 어떻게 상호 작용하는지를 보여줍니다. 다음은 예제 HTML 문서입니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>여백, 패딩 및 테두리 예제</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* 테두리 없음 */
}
LI {
color: white; /* 텍스트 색상은 흰색 */
background: blue; /* 내용 및 패딩은 파란색 */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* 오른쪽 패딩은 0px */
list-style: none /* 목록 항목 앞에 기호 없음 */
/* 테두리 없음 */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* 모든 면의 테두리 폭 설정 */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>목록의 첫 번째 요소
<LI class="withborder">목록의 두 번째 요소는 줄 바꿈을 설명하기 위해 약간 더 깁니다.
</UL>
</BODY>
</HTML>
이는 (다른 관계들 중에서) UL 요소가 두 개의 LI 자식을 가지는 문서 트리를 생성합니다.
다음 다이어그램 중 첫 번째는 이 예제를 통해 생성된 결과를 보여줍니다. 두 번째는 UL 요소의 여백, 패딩 및 테두리가 자식 LI 요소의 여백, 패딩 및 테두리와 어떻게 관련이 있는지를 보여줍니다. (이미지는 축척에 맞지 않음.)
다음 사항에 유의하세요:
여백 속성은 박스의 여백 영역의 너비를 지정합니다. 'margin' 축약 속성은 네 면의 여백을 모두 설정하는 반면, 다른 여백 속성은 각각 해당 면만 설정합니다. 이러한 속성은 모든 요소에 적용되지만, 수직 여백은 대체되지 않는 인라인 요소에는 영향을 미치지 않습니다.
이 섹션에서 정의된 속성은 <margin-width> 값 유형을 참조하며, 다음 값 중 하나를 사용할 수 있습니다:
여백 속성에 음수 값을 사용할 수 있지만, 구현별로 제한이 있을 수 있습니다.
| 이름: | margin-top, margin-bottom |
|---|---|
| 값: | <margin-width> | inherit |
| 초기값: | 0 |
| 적용 대상: | table-caption, table 및 inline-table 이외의 테이블 디스플레이 유형을 제외한 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | 포함 블록의 너비를 참조 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율 또는 절대 길이 |
이 속성은 대체되지 않는 인라인 요소에는 영향을 미치지 않습니다.
| 이름: | margin-right, margin-left |
|---|---|
| 값: | <margin-width> | inherit |
| 초기값: | 0 |
| 적용 대상: | table-caption, table 및 inline-table 이외의 테이블 디스플레이 유형을 제외한 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | 포함 블록의 너비를 참조 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율 또는 절대 길이 |
이 속성은 박스의 상단, 오른쪽, 하단 및 왼쪽 여백을 설정합니다.
h1 { margin-top: 2em }
| 이름: | margin |
|---|---|
| 값: | <margin-width>{1,4} | inherit |
| 초기값: | 개별 속성을 참조 |
| 적용 대상: | table-caption, table 및 inline-table이 아닌 테이블 디스플레이 유형을 제외한 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | 포함 블록의 너비 참조 |
| 미디어: | 시각적 |
| 계산값: | 개별 속성을 참조 |
'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; /* 반대쪽(오른쪽)에서 복사됨 */
}
CSS에서, 두 개 이상의 박스(형제 관계일 수도 있고 아닐 수도 있음)의 인접한 여백은 하나의 여백으로 결합될 수 있습니다. 이러한 방식으로 결합된 여백을 병합되었다고 하며, 결과적으로 생성된 결합된 여백을 병합된 여백이라고 합니다.
인접한 수직 여백은 병합되지만 다음의 경우는 예외입니다:
수평 여백은 절대 병합되지 않습니다.
두 여백이 인접하려면 다음 조건을 모두 충족해야 합니다:
병합된 여백은 구성 요소 여백 중 하나가 다른 여백과 인접한 경우 해당 여백과 인접하다고 간주됩니다.
참고: 인접한 여백은 형제 또는 조상 관계가 아닌 요소에 의해 생성될 수 있습니다.
참고: 위의 규칙은 다음을 의미합니다:
두 개 이상의 여백이 병합되면, 결과 여백 너비는 병합된 여백 너비 중 최대값이 됩니다. 음수 여백의 경우, 음수 인접 여백의 절대값 중 최대값이 양수 인접 여백의 최대값에서 차감됩니다. 양수 여백이 없는 경우, 인접 여백의 절대값 중 최대값이 0에서 차감됩니다.
박스의 상단 및 하단 여백이 인접한 경우, 여백이 관통 병합될 수 있습니다. 이 경우, 요소의 위치는 병합 중인 다른 요소와의 관계에 따라 달라집니다.
관통 병합된 요소의 위치는 병합 중인 다른 요소의 위치에 영향을 미치지 않습니다. 상단 테두리 엣지 위치는 이러한 요소의 자손을 배치하는 데만 필요합니다.
패딩 속성은 박스의 패딩 영역의 너비를 지정합니다. 'padding' 축약 속성은 네 면의 패딩을 모두 설정하는 반면, 다른 패딩 속성은 각각 해당 면만 설정합니다.
이 섹션에서 정의된 속성은 <padding-width> 값 유형을 참조하며, 다음 값 중 하나를 사용할 수 있습니다:
여백 속성과 달리, 패딩 값은 음수일 수 없습니다. 여백 속성과 마찬가지로, 패딩 속성의 백분율 값은 생성된 박스의 포함 블록 너비를 참조합니다.
| 이름: | padding-top, padding-right, padding-bottom, padding-left |
|---|---|
| 값: | <padding-width> | inherit |
| 초기값: | 0 |
| 적용 대상: | table-row-group, table-header-group, table-footer-group, table-row, table-column-group 및 table-column을 제외한 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | 포함 블록의 너비를 참조 |
| 미디어: | 시각적 |
| 계산값: | 지정된 백분율 또는 절대 길이 |
이 속성은 박스의 상단, 오른쪽, 하단 및 왼쪽 패딩을 설정합니다.
blockquote { padding-top: 0.3em }
| 이름: | padding |
|---|---|
| 값: | <padding-width>{1,4} | inherit |
| 초기값: | 개별 속성을 참조 |
| 적용 대상: | table-row-group, table-header-group, table-footer-group, table-row, table-column-group 및 table-column을 제외한 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | 포함 블록의 너비를 참조 |
| 미디어: | 시각적 |
| 계산값: | 개별 속성을 참조 |
'padding' 속성은 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'를 스타일 시트에서 동일한 위치에 설정하기 위한 축약 속성입니다.
하나의 구성 값만 있는 경우, 이는 모든 면에 적용됩니다. 두 개의 값이 있으면, 상단과 하단 패딩은 첫 번째 값으로 설정되고, 오른쪽과 왼쪽 패딩은 두 번째 값으로 설정됩니다. 세 개의 값이 있으면, 상단은 첫 번째 값으로 설정되고, 왼쪽과 오른쪽은 두 번째 값으로 설정되며, 하단은 세 번째 값으로 설정됩니다. 네 개의 값이 있으면, 각각 상단, 오른쪽, 하단 및 왼쪽에 적용됩니다.
패딩 영역의 표면 색상이나 이미지는 'background' 속성을 통해 지정됩니다:
h1 {
background: white;
padding: 1em 2em;
}
위 예제는 '1em' 수직 패딩 ('padding-top' 및 'padding-bottom')과 '2em' 수평 패딩 ('padding-right' 및 'padding-left')을 지정합니다. 'em' 단위는 요소의 글꼴 크기에 상대적입니다: '1em'은 사용 중인 글꼴 크기와 같습니다.
테두리 속성은 박스의 테두리 영역의 너비, 색상 및 스타일을 지정합니다. 이 속성은 모든 요소에 적용됩니다.
참고. 특히 HTML의 경우, 사용자 에이전트는 특정 사용자 인터페이스 요소(예: 버튼, 메뉴 등)의 테두리를 "일반" 요소와 다르게 렌더링할 수 있습니다.
테두리 너비 속성은 테두리 영역의 너비를 지정합니다. 이 섹션에서 정의된 속성은 <border-width> 값 유형을 참조하며, 다음 값 중 하나를 사용할 수 있습니다:
처음 세 값의 해석은 사용자 에이전트에 따라 다릅니다. 그러나 다음 관계는 유지되어야 합니다:
'thin' <= 'medium' <= 'thick'.
또한, 이러한 너비는 문서 전체에서 동일해야 합니다.
| 이름: | border-top-width, border-right-width, border-bottom-width, border-left-width |
|---|---|
| 값: | <border-width> | inherit |
| 초기값: | medium |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 절대 길이; 테두리 스타일이 'none' 또는 'hidden'인 경우 '0' |
이 속성은 박스의 상단, 오른쪽, 하단 및 왼쪽 테두리의 너비를 설정합니다.
| 이름: | border-width |
|---|---|
| 값: | <border-width>{1,4} | inherit |
| 초기값: | 개별 속성을 참조 |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 개별 속성을 참조 |
이 속성은 'border-top-width', 'border-right-width', 'border-bottom-width', 그리고 'border-left-width'를 스타일 시트에서 동일한 위치에 설정하기 위한 축약 속성입니다.
하나의 구성 값만 있는 경우, 이는 모든 면에 적용됩니다. 두 개의 값이 있으면, 상단과 하단 테두리는 첫 번째 값으로 설정되고, 오른쪽과 왼쪽은 두 번째 값으로 설정됩니다. 세 개의 값이 있으면, 상단은 첫 번째 값으로 설정되고, 왼쪽과 오른쪽은 두 번째 값으로 설정되며, 하단은 세 번째 값으로 설정됩니다. 네 개의 값이 있으면, 각각 상단, 오른쪽, 하단 및 왼쪽에 적용됩니다.
아래 예제에서, 주석은 상단, 오른쪽, 하단 및 왼쪽 테두리의 결과 너비를 나타냅니다:
h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */
테두리 색상 속성은 박스의 테두리 색상을 지정합니다.
| 이름: | border-top-color, border-right-color, border-bottom-color, border-left-color |
|---|---|
| 값: | <color> | transparent | inherit |
| 초기값: | 'color' 속성의 값 |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 'color' 속성에서 가져온 경우, 'color'의 계산된 값; 그렇지 않은 경우 지정된 대로 |
| 이름: | border-color |
|---|---|
| 값: | [ <color> | transparent ]{1,4} | inherit |
| 초기값: | 개별 속성을 참조 |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 개별 속성을 참조 |
'border-color' 속성은 네 면의 테두리 색상을 설정합니다. 값은 다음과 같은 의미를 가집니다:
'border-color' 속성은 1개에서 4개의 구성 값을 가질 수 있으며, 값은 'border-width'처럼 다른 면에 설정됩니다.
요소의 테두리 색상이 테두리 속성으로 지정되지 않은 경우, 사용자 에이전트는 요소의 'color' 속성 값을 테두리 색상의 계산된 값으로 사용해야 합니다.
이 예에서는 테두리가 검은색 실선이 됩니다.
p {
color: black;
background: white;
border: solid;
}
테두리 스타일 속성은 박스 테두리의 선 스타일(실선, 이중선, 점선 등)을 지정합니다. 이 섹션에서 정의된 속성은 <border-style> 값 유형을 참조하며, 다음 값 중 하나를 사용할 수 있습니다:
모든 테두리는 박스의 배경 위에 그려집니다. 'groove', 'ridge', 'inset', 'outset' 값으로 그려진 테두리의 색상은 요소의 테두리 색상 속성에 따라 달라집니다. 그러나 사용자 에이전트는 실제로 사용되는 색상을 계산하기 위해 자체 알고리즘을 선택할 수 있습니다. 예를 들어, 'border-color' 값이 'silver'인 경우, 사용자 에이전트는 하얀색에서 짙은 회색으로의 그라데이션 색상을 사용하여 경사진 테두리를 나타낼 수 있습니다.
| 이름: | border-top-style, border-right-style, border-bottom-style, border-left-style |
|---|---|
| 값: | <border-style> | inherit |
| 초기값: | none |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
| 이름: | border-style |
|---|---|
| 값: | <border-style>{1,4} | inherit |
| 초기값: | 개별 속성을 참조 |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 개별 속성을 참조 |
'border-style' 속성은 네 면의 테두리 스타일을 설정합니다. 이 속성은 1개에서 4개의 구성 값을 가질 수 있으며, 값은 위의 'border-width'처럼 다른 면에 설정됩니다.
#xy34 { border-style: solid dotted }
위 예제에서 수평 테두리는 'solid'이고, 수직 테두리는 'dotted'입니다.
테두리 스타일의 초기값이 'none'이므로, 테두리 스타일이 설정되지 않으면 테두리가 보이지 않습니다.
| 이름: | border-top, border-right, border-bottom, border-left |
|---|---|
| 값: | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| 초기값: | 개별 속성을 참조 |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 개별 속성을 참조 |
이 속성은 박스의 상단, 오른쪽, 하단 및 왼쪽 테두리의 너비, 스타일 및 색상을 설정하기 위한 축약 속성입니다.
h1 { border-bottom: thick solid red }
위 규칙은 H1 요소 아래 테두리의 너비, 스타일 및 색상을 설정합니다. 생략된 값은 초기값으로 설정됩니다. 다음 규칙은 테두리 색상을 지정하지 않았으므로, 테두리는 'color' 속성에서 지정된 색상을 갖게 됩니다:
H1 { border-bottom: thick solid }
| 이름: | border |
|---|---|
| 값: | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| 초기값: | 개별 속성을 참조 |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니오 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 개별 속성을 참조 |
'border' 속성은 박스의 네 면 모두에 동일한 너비, 색상 및 스타일을 설정하기 위한 축약 속성입니다. 축약 속성 'margin' 및 'padding'과 달리, 'border' 속성은 네 테두리에 다른 값을 설정할 수 없습니다. 이를 위해서는 하나 이상의 다른 테두리 속성을 사용해야 합니다.
아래 첫 번째 규칙은 이후에 나오는 네 개의 규칙 집합과 동일합니다:
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
어느 정도까지는, 속성이 중복된 기능을 가지므로, 규칙이 지정되는 순서가 중요합니다.
다음 예제를 고려하세요:
blockquote {
border: solid red;
border-left: double;
color: black;
}
위 예제에서, 왼쪽 테두리의 색상은 검정이고, 다른 테두리는 빨간색입니다. 이는 'border-left'가 너비, 스타일 및 색상을 설정하기 때문입니다. 색상 값이 'border-left' 속성에 의해 지정되지 않았으므로, 이는 'color' 속성에서 가져옵니다. 'color' 속성이 'border-left' 속성 이후에 설정된 사실은 중요하지 않습니다.
각 라인 박스에 대해, 사용자 에이전트(UAs)는 각 요소에 대해 생성된 인라인 박스를 가져와 시각적 순서(논리적 순서가 아님)로 여백, 테두리 및 패딩을 렌더링해야 합니다.
요소의 'direction' 속성이 'ltr'인 경우, 요소가 나타나는 첫 번째 라인 박스의 가장 왼쪽에 생성된 박스는 왼쪽 여백, 왼쪽 테두리 및 왼쪽 패딩을 가지며, 요소가 나타나는 마지막 라인 박스의 가장 오른쪽에 생성된 박스는 오른쪽 패딩, 오른쪽 테두리 및 오른쪽 여백을 가집니다.
요소의 'direction' 속성이 'rtl'인 경우, 요소가 나타나는 첫 번째 라인 박스의 가장 오른쪽에 생성된 박스는 오른쪽 패딩, 오른쪽 테두리 및 오른쪽 여백을 가지며, 요소가 나타나는 마지막 라인 박스의 가장 왼쪽에 생성된 박스는 왼쪽 여백, 왼쪽 테두리 및 왼쪽 패딩을 가집니다.