CSS 여백 테두리 오버레이에 대한 심층 분석을 그래픽으로 시연_경험 교환

경계 오버레이는 매우 간단한 개념입니다. 그러나 실제로 웹페이지를 레이아웃할 때 많은 혼란을 야기할 수 있습니다. 간단히 말해서 두 개의 수직 경계가 만나면 경계가 형성됩니다. 이 경계의 높이는 겹쳐진 두 경계의 높이 중 더 큰 것과 같습니다.

요소가 다른 요소 위에 나타나면 그림과 같이 첫 번째 요소의 아래쪽 테두리가 두 번째 요소의 위쪽 테두리와 겹칩니다.

한 요소가 다른 요소 내에 포함된 경우(요소를 구분하는 패딩이나 테두리가 없다고 가정) 테두리가 열려 있음) 상단 및/또는 하단 경계도 겹쳐집니다. 그림을 참조하세요.



처음에는 조금 이상해 보일 수도 있지만 테두리가 자체적으로 겹칠 수도 있습니다. 빈 요소가 있고 테두리는 있지만 테두리나 패딩은 없다고 가정해 보세요. 이 경우 그림과 같이 위쪽 경계선과 아래쪽 경계선이 서로 닿아 겹쳐지게 됩니다.



이 테두리가 다른 요소의 테두리와 닿으면 그림과 같이 겹칩니다.



이것이 바로 일련의 빈 단락 요소가 공간을 거의 차지하지 않는 이유입니다. 테두리가 함께 추가되어 작은 테두리를 형성합니다.

테두리 오버레이가 처음에는 조금 이상해 보일 수도 있지만 실제로는 의미가 있습니다. 여러 단락으로 구성된 일반적인 텍스트 페이지를 예로 들어 보겠습니다(그림 2-8 참조). 첫 번째 단락 위의 공간은 단락의 위쪽 여백과 같습니다. 테두리 오버레이가 없으면 모든 후속 단락 사이의 테두리는 인접한 위쪽 및 아래쪽 테두리의 합이 됩니다. 이는 단락 사이의 공간이 페이지 상단의 두 배라는 것을 의미합니다. 테두리 겹침이 발생하는 경우 문단 사이의 상단 및 하단 테두리가 겹쳐져 모든 곳의 거리가 일정해집니다



테두리 오버레이는 일반적인 문서 흐름에서 블록 상자의 수직 경계에서만 발생합니다. 인라인 상자, 부동 상자 또는 절대 위치 상자 사이의 경계는 겹치지 않습니다.

　테두리 오버레이 문제
테두리 오버레이는 잘못 이해하면 많은 문제를 일으킬 수 있는 CSS 기능입니다. div 요소 내 중첩된 단락의 간단한 예를 참조하세요.



margin:10px

그림 1-1

그림 1-2