CSS 외부 마argins 병합
- 이전 페이지 CSS 외부 마argins
- 다음 페이지 CSS 내부 마argins
외곽 여유 결합은 두 개의 수직 외곽 여유가 만나면, 그들은 하나의 외곽 여유를 형성한다는 것을 의미합니다.
결합된 외곽 여유의 높이는 결합된 외곽 여유의 높이 중 큰 것과 일치합니다.
외곽 여유 결합
외곽 여유 결합(합성)은 매우 간단한 개념입니다. 하지만, 실제로 웹 페이지를 레이아웃할 때, 많은 혼란을 일으킬 수 있습니다.
간단히 말해서, 외곽 여유 결합은 두 개의 수직 외곽 여유가 만나면, 그들은 하나의 외곽 여유를 형성한다는 것을 의미합니다. 결합된 외곽 여유의 높이는 결합된 외곽 여유의 높이 중 큰 것과 일치합니다.
때문에 하나의 요소가 다른 요소 위에 나타날 때, 첫 번째 요소의 하단 외곽 여유와 두 번째 요소의 상단 외곽 여유가 결합됩니다. 아래 그림을 참고하세요:
때문에 다른 요소에 포함되어 있는 요소가 있을 때(내곽 여유나 테두리가 외곽 여유를 분리하지 않는다고 가정), 그들의 상단과/또는 하단 외곽 여유도 결합됩니다. 아래 그림을 참고하세요:
이상하게 보일 수 있지만, 외곽 여유는 자신과도 결합될 수 있습니다.
비어 있는 요소가 있을 때, 외곽 여유가 있지만 테두리나 채우기가 없다면, 상단 외곽 여유와 하단 외곽 여유는 만나서 결합됩니다:
이 외곽 여유가 다른 요소의 외곽 여유와 만나면, 또한 결합됩니다:
이것이 일련의 구절 요소가 공간을 많이 차지하지 않는 이유는, 그들의 모든 외곽 여유가 결합되어 작은 외곽 여유를 형성하기 때문입니다.
외곽 여유 결합은 처음 보면 이상하게 보일 수 있지만, 실제로는 의미가 있습니다. 여러 개의 구절로 구성된 표준 텍스트 페이지를 예로 들어보겠습니다. 첫 번째 구절 위의 공간은 구절의 상단 외곽 여유와 일치합니다. 외곽 여유 결합이 없다면, 이후 모든 구절 간의 외곽 여유는 인접 상단 외곽 여유와 하단 외곽 여유의 합이 됩니다. 이는 구절 간의 공간이 페이지 상단의 두 배가 될 것입니다. 외곽 여유 결합이 발생하면, 구절 간의 상단 외곽 여유와 하단 외곽 여유는 결합되어 모든 부분의 거리가 일치하게 됩니다.
주의사항:일반 문서 흐름에서의 블록 상자의 수직 외곽 여유만이 외곽 여유 결합이 발생합니다. 행 내 상자, 부유 상자 또는 절대 위치 사이의 외곽 여유는 결합되지 않습니다.
모든 CSS 외곽 여유 속성
| 属性 | 描述 |
|---|---|
| 속성 | 설명 |
| margin | 외 경계 속성을 한 번의 선언로 설정하는 간단한 속성입니다. |
| margin-left | 요소의 왼쪽 외 경계를 설정합니다. |
| margin-right | 요소의 오른쪽 외 경계를 설정합니다. |
| margin-top | 요소의 상단 외 경계를 설정합니다. |
- 이전 페이지 CSS 외부 마argins
- 다음 페이지 CSS 내부 마argins
