레이아웃 구조를 설계할 때 우리를 방해하는 아이, margin
.
.
.
마진 겹칩 현상은 인접한 블록 요소 사이의 마진이 겹칠 경우 더 높은 값의 margin 값이 적용되는 현상을 말합니다. 심지어 부모요소와 자식요소 사이에서도 발생합니다.
이 경우 자식요소의 margin 값이 부모요소의 높이에 영향을 받지 않고 부모영역을 넘어섭니다.
예시
위의 예시에서는 오렌지색 한 개의 부모요소와 검은색 두 개의 자식 요소가 있습니다.
첫번째 자식요소에게 margin: 20px을 주고
두번째 자식요소에게 margin: 30px을 주었습니다.
우리가 원했던건 자식요소의 4면에 20px, 30px의 공백이었습니다.
하지만 자식간의 margin은 더 큰 값인 30px만 적용되고,
인접한 부모요소 바깥으로 자식요소의 마진이 적용된 것을 알 수 있습니다.
이것이 마진겹침현상입니다.
마진 겹침 현상이 발생하는 이유
그 이유는 CSS의 마진 겹침(collapsing margins) 규칙 때문입니다.
그 규칙은 다음과 같습니다.
상쇄(Collapsing) 현상: 형제 요소 간의 상하 마진이 서로 겹치는 현상을 상쇄라고 합니다. 이때 겹치는 마진 중에서 더 큰 값이 최종적으로 적용됩니다.
부모-자식 간의 마진 겹침 억제: 부모 요소와 첫 번째 자식 요소 간의 마진 겹침은 억제됩니다. 부모와 첫 번째 자식 간의 마진 중에서 더 큰 값이 적용되지 않고, 양쪽 마진이 상쇄되어 최종 마진이 적용되지 않는 것처럼 보일 수 있습니다.
빈 블록의 마진: 빈 블록 레벨 요소의 상하 마진은 해당 블록의 높이에 영향을 주지 않습니다. 따라서 빈 요소의 마진이 다른 요소의 마진과 겹치게 됩니다.
해결방법
1. overflow: hidden
overflow: hidden 속성을 부모 요소에 적용하면 부모와 첫 번째 자식 요소 사이의 마진 겹침 현상이 사라지는데, 이는 해당 속성이 부모 요소의 BFC (Block Formatting Context)를 생성하기 때문입니다.
BFC는 레이아웃을 형성하는데 도움을 주는 CSS의 개념 중 하나입니다. BFC를 갖는 요소는 주변 요소와의 상호작용을 격리시키고, 그 안에서만 레이아웃이 형성되도록 합니다.
overflow: hidden 속성이 부모 요소에 적용되면 부모 요소는 새로운 BFC를 형성하게 됩니다.
2. display: inline-block
display: inline-block을 사용하면 블록 레벨 요소가 인라인 레벨 박스처럼 행동하게 되며, 이로 인해 일부 마진 겹침이 사라질 수 있습니다. 이는 inline-level 박스들 간에는 마진 겹침이 발생하지 않기 때문입니다.
자식요소 간의 마진?
하지만 1, 2번 방법 모두 부모 안의 자식요소들의 마진 넘침 현상을 방지합니다.
자식요소들 간의 마진 겹침을 해결하려면 자식 둘 중 하나의 마진 값을 임의로 설정해야 합니다.
