마진 겹침 현상 (margin collapsing)
: 인접하는 블록 요소의 상하단의 마진이 겹쳐졌을 때 더 큰 마진 값이 적용되는 현상
마진 겹침 현상의 조건
1. 인접하는 block 요소끼리만 일어난다.
2. 상하단만 겹침 현상이 일어난다. (좌우의 여백의 병합은 일어나지 않는다)
Case 1: 인접하는 block 요소끼리 상하로 마진이 겹친 경우
<div class="one"></div>
<div class="two"></div>div {
width: 100px;
height: 100px;
background-color: khaki;
}
.one {
margin-bottom: 30px;
}
.two {
argin-top: 60px;
}
두 요소의 위아래 마진 값이 더해지지 않고 겹쳐졌습니다. 이는 첫 번째 요소의 마진 값(30px) 보다 더 큰 두 번째 마진 값(60px)이 적용된 것입니다.
Case2: 부모와 자식 간 마진이 겹친 경우
(1) 부모와 자식 둘 다 마진이 없는 상태
.parent {
background-color: white;
width: 300px;
margin: 0;
}
.children {
background-color: blue;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 0;
}
(2) 자식에게 마진 상하좌우 50px씩 준 후
이렇게 된 이유는,
마진 겹침 현상의 조건이 만족하기 때문인데
일단 부모(흰색 부분)와 자식 요소(파란색 부분) 둘 다 블록 요소이고 인접해 있습니다.(조건1 만족)
그리고 자식의 좌우 마진은 잘 적용되었지만 상하 마진만 적용이 되지 않았습니다. 이것은 부모와 자식 간의 마진이 결합되었다는 뜻!(조건2 만족)
즉, 마진 결합이 되면 두 마진 값 중 큰 마진 값이 적용되는데
자식의 마진 값은 50px이고 부모의 마진 값은 0px이므로 더 큰 자식의 마진 값 50px이 적용된 것입니다.
따라서, 눈에는 보이지 않지만 부모와 자식이 만나는 맨 위쪽과 아래쪽에는 사실 부모의 마진(0px)과 자식의 마진(50px)이 겹쳐진 50px의 마진이 들어있습니다.
마진 50px이 들어있는 것을 볼 수 있도록 부모 요소 위에 다른 요소를 하나 더 만들어 보았습니다. 아래 이미지들을 보면 실제로 부모 요소 위에 50px의 마진이 생긴 것을 확인해 볼 수 있습니다.
🛠 해결방법
1. 부모 요소에 border 값 적용하기
- 부모 요소에 border 값을 적용해 주어 부모와 자식의 마진이 겹치지 않게 만듭니다.
- 하지만, 만약 border = 1px을 주었다고 가정한다면, 1px이 더 늘어난 것이기 때문에 디자인 측면에서 1px의 오차가 발생하게 됩니다.
2. 빈 table 태그 넣기 ✨
table 태그 자체에는 아무런 크기가 없어서 박스 크기에 영향을 주지 않습니다!
<div class="parent">
<table></table>
<div class="children">A</div>
<div class="children">B</div>
<table></table>
</div>또는
.parent::before,
.parent::after {
content: ' ';
display: table;
}3. 자식 요소의 display 속성 값을 inline-block으로 바꾸기
- 마진 결합 현상의 조건1(인접하는 block 요소끼리만 일어난다)이 더 이상 만족되지 않아 부모와 자식 간의 마진 결합 현상이 일어나지 않습니다.
- 하지만, 자식들끼리의 마진 병합도 일어나지 않아 자식들의 각 마진 값이 더해집니다.
- 하지만, 자식들끼리의 마진 병합도 일어나지 않아 자식들의 각 마진 값이 더해집니다.
3. 블록 서식 맥락이 생성되게 하기 ✨
3-1. 부모 요소에 overflow: hidden 적용하기
- 부모 요소에
overflow: hidden을 적용시켜주면 부모, 자식 박스의 크기에도 영향이 없고 자식들 간의 마진 병합도 일어나는 동시에 부모, 자식 간의 마진 병합은 또 일어나지 않게 만들 수 있습니다!- 해결되는 이유
:overflow: hidden을 적용하게 되면, 새로운 맥락이 만들어지면서 부모 요소가 자식 요소를 인식하게 되므로 마진 겹침 현상이 일어나지 않습니다.
(블록 서식 맥락: https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context)
- 해결되는 이유
.parent {
overflow: hidden;
background-color: white;
width: 300px;
margin: 0;
}3-2. 부모 요소에 display: flow-root 적용하기
.parent {
display: flow-root;
background-color: white;
width: 300px;
margin: 0;
}정리
IE를 고려한다면 -> overflow: hidden 또는 table 요소 넣기
IE를 고려하지 않아도 된다면 -> display: flow-root 사용
잘못된 내용이 있다면 댓글로 알려주세요!🤗
참고
