카테고리 없음

TIL :: 마진 병합 현상

Deeb 2022. 4. 6. 23:09

마진 겹침 현상 (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 강좌와 제주코딩베이스캠프 강의를 보며 정리한 내용입니다. 

반응형