함박 모델: CSS 백지름 결합
- 이전 페이지 CSS 외부 여백
- 다음 페이지 CSS 정위치 개요
백지름 결합은 두 가지 수직 백지름이 만나면 그들은 하나의 백지름을 형성한다는 것을 의미합니다.
결합된 백지름의 높이는 결합된 백지름의 높이 중 큰 것과 같습니다.
백지름 결합
백지름 결합(叠加)은 매우 간단한 개념입니다. 그러나, 실제 웹 레이아웃을 구성할 때에는 많은 혼란을 초래할 수 있습니다.
간단히 말해서, 백지름 결합은 두 가지 수직 백지름이 만나면 그들은 하나의 백지름을 형성한다는 것을 의미합니다. 결합된 백지름의 높이는 결합된 백지름의 높이 중 큰 것과 같습니다.
한 요소가 다른 요소 위에 나타날 때, 첫 번째 요소의 하백지름과 두 번째 요소의 상백지름이 결합됩니다. 아래 그림을 참조하세요:
한 요소가 다른 요소에 포함되어 있을 때(내백지름이나 경계선이 백지름을 분리하지 않는다고 가정), 그들의 상백지름과/또는 하백지름도 결합됩니다. 아래 그림을 참조하세요:
이상하게 보일 수 있지만, 백지름은 자신과도 결합될 수 있습니다.
빈 요소가 있을 때, 그것은 백지름이 있지만 경계선이나 채우기가 없습니다. 이 경우, 상백지름과 하백지름이 만나게 되고, 그들은 결합됩니다:
이 외부 여백이 다른 요소의 외부 여백과 만나면, 또한 결합됩니다:
이것은 여러段落 요소가 매우 작은 공간을 차지하는 이유 중 하나입니다. 그들의 모든 외부 여백은 결합되어 작은 외부 여백을 형성합니다.
외부 여백 결합은 첫 번째로 보면 이상하게 느껴질 수 있지만, 실제로는 의미가 있습니다. 여러段落로 구성된 타입의 텍스트 페이지를 예로 들어보겠습니다. 첫 번째 파라그래프 위의 공간은 파라그래프의 상단 외부 여백과 일치합니다. 외부 여백 결합이 없다면, 이후 모든 파라그래프 간의 외부 여백은 연속된 상단 외부 여백과 하단 외부 여백의 합이 됩니다. 이는 파라그래프 간의 공간이 페이지 상단의 두 배가 될 것입니다. 외부 여백 결합이 발생하면, 파라그래프 간의 상단 외부 여백과 하단 외부 여백은 결합되어 모든 곳의 거리가 일관됩니다.
주의:일반 문서 흐름에서의 블록 블록의 수직 외부 여백만이 외부 여백 결합이 발생합니다. 행 내 블록, 부浮 블록 또는 절대 정위치 사이의 외부 여백은 결합되지 않습니다.
- 이전 페이지 CSS 외부 여백
- 다음 페이지 CSS 정위치 개요
