| CSS | 마진 병합은 왜 일어날까?

마진(margin)

: 바깥 여백 영역,  border 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할

여러 요소에 마진값이 넣어져 있을 때 의도치않게

요소의 여백이 줄어들어져있거나 여백을 늘려도 늘어나지 않는 현상들을 겪을 수 있다.

 

 

📝  마진 병합 현상(Margin Collapsing)

: 요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상 

•  인접해있는 블럭 요소끼리만 일어난다.
• 상하만 해당한다(좌우는 해당 안함)

See the Pen Untitled by Webin (@hyebin-woo) on CodePen.

: 

💡 해결 방법 

1. 자식요소의 display속성값을 inline-block으로 바꾸기

See the Pen Untitled by Webin (@hyebin-woo) on CodePen.

: 자식요소의 속성값을 inline-block으로 바꿔주면 A 와 B사이의 마진 병합현상이 제거된다.

 

2. 부모요소의 overflow:hidden; 속성을 이용하기

See the Pen Untitled by Webin (@hyebin-woo) on CodePen.

: 형제간의 마진병합은 냅두고 상하단의 부모자식간의 마진병합현상만 제거하고 싶다면 overflow: hidden;을 쓰면 된다.