CSS 웹 페이지를 레이아웃할 때 이상한 문제가 많이 발생합니다. 이러한 문제는 브라우저 버그나 CSS 속성에 대한 이해 부족으로 인해 발생할 수 있습니다. 이 문서에서는 CSS 여백 오버레이 문제에 대해 설명합니다. 마진 병합은 두 개의 수직 마진이 만나 하나의 마진을 형성한다는 의미입니다. 병합된 여백의 높이는 병합된 두 여백의 높이 중 더 큰 것과 같습니다. 마진 병합(겹침)은 매우 간단한 개념입니다. 그러나 실제로 웹페이지를 레이아웃할 때 많은 혼란을 야기할 수 있습니다. 요소가 다른 요소 내에 포함된 경우(여백을 구분하는 패딩이나 테두리가 없다고 가정) 해당 요소의 위쪽 및/또는 아래쪽 여백도 병합됩니다. 아래 그림을 보십시오: 이상하게 보일 수도 있지만 여백은 자체적으로 병합될 수도 있습니다. 여백은 있지만 테두리나 패딩은 없는 빈 요소가 있다고 가정해 보세요. 이 경우 위쪽 여백과 아래쪽 여백이 서로 부딪혀 병합됩니다. 이 여백이 다른 요소의 여백과 만나면 병합됩니다. 이것이 일련의 단락 요소가 공간을 거의 차지하지 않는 이유입니다. 모든 여백이 함께 병합되어 작은 여백을 형성하기 때문입니다. 마진 병합은 처음에는 조금 이상해 보일 수 있지만 실제로는 의미가 있습니다. 여러 단락으로 구성된 일반적인 텍스트 페이지를 예로 들어 보겠습니다. 첫 번째 단락 위의 공간은 단락의 위쪽 여백과 같습니다. 여백 병합을 사용하지 않으면 모든 후속 단락 사이의 여백은 인접한 위쪽 및 아래쪽 여백의 합이 됩니다. 이는 단락 사이의 공간이 페이지 상단의 두 배라는 것을 의미합니다. 여백 병합이 발생하면 단락 사이의 위쪽 및 아래쪽 여백이 함께 병합되어 모든 곳의 거리가 일정해집니다. 여백 병합은 일반적인 문서 흐름에서 블록 상자의 수직 여백에 대해서만 발생합니다. 인라인 상자, 부동 상자 또는 절대 위치 상자 사이의 여백은 병합되지 않습니다.
요소가 다른 요소 위에 나타날 때 첫 번째 요소의 아래쪽 외부 가장자리
