마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미한다.
마진 병합은 다음 세가지의 경우에 일어난다.
- 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합
- 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
- 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합
- 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합
- 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합
마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다.
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 한다.
마진 병합이 발생할 경우 절대값이 더 큰 요소의 마진 값이 적용된다.
마진 병합은 절대 위치나 상대 위치가 주어진 요소들에서는 발생하지 않는다.->(position, float를 지정한 경우)
1. margin병합이 일어나지 않음
<div class="horizontal-container">
<div class="first-box-1 green-box"></div>
<div class="second-box-1 blue-box"></div>
</div>
마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다.
2. margin 병합이 일어남
<div class="vertical-container">
<div class="first-box-2 green-box"></div>
<div class="second-box-2 blue-box"></div>
</div>
요소가 상하로 인접한 경우, 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어난다.
제일 큰 여백의 크기를 가진 초록색 div의 40px로 병합된다.
(플로팅 요소와 절대 위치를 지정했을 경우 여백은 상쇄되지 않는다.)
3. 마진 병합이 일어나지 않음
<div class="vertical-container">
<div class="parent-3 green-box">
<div class="child-3 blue-box"></div>
</div>
</div>
마진 병합은 마진이 반드시 맞닿아야 발생하며, padding과 margin의 경우는 마진 결합이 발생하지 않는다.
4. 마진 병합이 일어남
<div class="vertical-container">
<div class="parent-4 green-box">
<div class="child-4 blue-box"></div>
</div>
</div>
부모의 margin-top을 자손의 margin-top과 분리할 권한이 없는 경우,
또는 부모 블록에 테두리, 안쪽 여백, 인라인 콘텐츠가 없으며
부모의 margin-bottom과 자손의 margin-bottom을 분리할 height, min-height, max-height가 존재하지 않는 경우,
부모와 자손의 마진 결합이 발생한다.
상쇄된 여백은 부모블록 바깥에 위치한다.
5. 마진 병합이 일어남
<div class="vertical-container">
<div class="parent-5 green-box">
<div class="child-5 blue-box"></div>
</div>
</div>
부모요소의 상단 마진과 첫 번째 자식 요소의 상단 마진이 병합된다는 규칙과
두 마진 중 큰 값이 적용된다는 규칙이 합쳐져 부모 요소와 컨테이너 요소 사이에 40px 만큼의 간격이 생긴다.
https://www.boostcourse.org/cs120/lecture/92916
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
'Front-end > CSS' 카테고리의 다른 글
[CSS] Safari환경에서 적용안되는 폰트 해결하기 (0) | 2022.06.23 |
---|---|
[CSS] div border , table 태그 border 테두리 겹침 제거 (0) | 2022.05.25 |
[CSS] 선택자 class & id (0) | 2022.05.22 |
[CSS] 구체성 (0) | 2022.05.22 |
[CSS] css 구문과 적용 (0) | 2022.05.22 |