마진 겹침 현상 (margin collapsing) 이란?
1. 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이
부모의 높이에 영향을 미치지 않는 현상
2. 요소와 요소의 사이가 인접한 경우 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 때
더 높은 값의 마진 값이 적용되는 현상
<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
</div>parent라는 div안에 child가 두 개가 존재한다고 생각해보자.
.parent{
width: 300px;
margin: 0 auto;
background-color: #0A174E;
}
.child{
width: 200px;
height: 200px;
background-color:#F5D042;
color: rgba(255, 255, 255, 0.3);
font-size: 100px;
text-align: center;
margin: 50px;
}
그리고 위와 같이 css를 적용하면 옆의 사진처럼
child 박스 두 개와 그 주변을 50px 씩 둘러싼 parent 영역을 예상할 수 있다.
하지만 결과는 예상과 다르게 아래와같이 H 모양으로 margin 영역이 나왔다.
예상대로라면 .child의 margin이 A,B 영역위에 존재해야하지만 결과는 달랐다. 왜냐하면 위에 이렇게 인접해있는 블럭요소 .parent와 .child가 인접해있는 블럭요소이기에 .parent의 margin : 0을 따라갔기에 .child에 margin의 top 값이 적용되지 않았다. 여기서 알아두어야할 것 은 .child 요소의 margin 값이 부모 영역을 넘어서고 있는 모습을 확인할 수 있다.
부모와 자식요소 모두에게 margin-top을 주고 싶은 경우 낮은 값의 마진 탑 값이 상쇄되어 버린 것으로 이런 현상을 해결하지 않는다면 예상과 다른 UI가 구성될 가능성이 높다.
해결하기위해서 .parent에 padding이나 border 속성을 주어 원하는 모습을 구현할 수 있지만 이 방법들은 1px이지만 의도한 UI와는 어긋난다.
이에 대한 해결 방법❕❗
1. 부모 요소에 overflow 속성 값을 적용해준다.
2. 부모 요소에 display: inline-block 값을 적용해준다.
.parent{
width: 300px;
margin: 0 auto;
background-color: #0A174E;
overflow: hidden;
/* display: none; */
}둘 중 하나만 적용하여도 의도한대로 margin 영역이 제대로 나오는 것을 확인할 수 있다.
구현하고싶은 UI에 맞게 구현할 수 있는 방법을 알게되었지만
👇 아래 링크는 영어로 되어있지만 마진 겹침 현상에 대해 더 자세하고 다양하게 알려주어 참고하기 좋은 글이다.
https://www.joshwcomeau.com/css/rules-of-margin-collapse/
여기서의 궁금한 점은
overflow: hidden;을 적용했을때는 text-align 속성이 적용되어 이전과 동일하게 화면의 중앙에 위치하였는데
display: inline-block;을 적용하면 .parent가 좌측에 배치되는것을 확인할 수 있었다.
이에 대해선 추후에 포스팅을 해보겠다.
빔캠프 CSS 코딩가나다 시리즈의 margin collapsing 강좌와 제주코딩베이스캠프 강의를 보며 정리한 내용입니다.