CSS 마진 병합 현상

썸네일

 

🚀 마진 병합 현상

---

어라라 나는 분명 마진 값을 줬는데 맘처럼 여백이 생기지 않는 경우가 있을 수 있다. 이때는 마진 병합 현상이 일어난 것인데 우선 마진 병합 현상에 대해 알아보자

 

마진 병합 현상

마진 병합 현상은 붙어있는 블록 요소의 상하단 마진이 병합되는 현상을 말한다. 이러한 마진 병합 현상이 일어나려면 조건이 필요한데

 

마진 병합 현상의 조건

• 붙어있는 block요소끼리만 일어난다.
• 좌우는 일어나지 않고 상하단만 일어난다.

아니 알겠는데 이딴게 왜 일어나냐고요!! 그냥 하면 될 것을!!이라 생각할 수 있지만 사실 디자인하기에는 매우 용이하다 ^^ 브라우저야 고마워~ 하지만 원치 않는 마진 병합을 만날 수도 있다.

 

부모와 자식간의 마진 병합

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

요소에 300px width 값을 주고, 자식(. child) 요소에 width 200px을 준 후 margin을 0을 준 모습이다. 여기서 margin 값을 50px을 준다면 어떻게 될까?? 한 번 상상을 해보아라.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

요소에 margin값을 50px을 준 모습이다. 얼라리요? 뜬금없이 H 모양은 뭐고.. 왜 body에 붙어있던 부모 요소가 난데없이 떨어진 것인가? 여기서 부모와 자식 간의 마진 병합이 이뤄진 것을 알 수 있다. 원래 생각대로라면 8 모양이 나와야 하는데 인접한 상하단의 부모 요소에게 margin 값인 50px을 뺏기게 된 것이다!! 부모 요소의 마진으로 병합되어 마치 부모 요소의 마진인 것처럼 나오게 되는 것이다. 그럼 이걸 해결할 방법은 없을까??

 

마진 병합 해결방법

1. 뭔가 텍스트와 같은 요소를 넣는다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

왜 이렇게 되느냐 텍스트가 들어감으로써 부모와 자식 간의 거리가 떨어졌기 때문에 마진 병합이 일어나는 조건인 붙어있는 block요소 사이에 일어난다를 충족하지 못했기 때문에 마진 병합 현상이 일어나지 않는다. 근데 영;; 디자인적으로 너무 못생겼다. 그래서 부모와 자식을 떨어뜨릴 다른 방법이 있는데 그건 바로

 

 

2. 부모요소에 padding이나 border값을 준다.

 

- padding을 준 경우

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

- border값을 준 경우

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

이렇게 하면 글자도 안 보이고 너무 이쁘게 8 모양이 나온다. 근데 마진 병합이란 게 이렇게 쉽게 호락호락당해주지 않는다. 디자이너 분들은 단 1px의 오차도 용납하지 않는다. 우리 디자이너 분들과 사이좋게 지내면서 마진 병합도 없앨 방법은 정녕 없을까? 아니, 코딩에는 언제나 답이 존재한다.

 

 

3. 빈 table 태그를 넣는다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

마크업이 조금 지저분하긴 한데 이럴 때 사용할 수 있는 게 바로 가상 요소!!

.parent::before,
.parent::after {
    content: ' ';
    display: table;
}

가상 요소를 사용하게 된다면 실제 table 요소를 넣지 않아도 괜찮다!! 행복 ㅎㅅㅎ

 

계속 뭔가 마크업을 건들고, 부모 요소에 뭔가를 주고 했는데 자식이 뭔가를 할 수도 있다. 엄마 아빠가 이만큼 해줬으니까 너도 뭣좀 해봐라 아들아

 

 

4. 자식 요소의 display 속성 값을 inline-block으로 바꾼다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

flex는 빠져버렸지만 상관없다. 세상에 자식 요소에도 해결할 방법이 있었다니!!! 인접한 block요소만이기 때문에 inline-block은 마진 병합이 일어나지 않는다 하지만 1번과 2번 사이를 본다면.. 아 여기도 안 먹는구나 ^^,, 디자이너님 죄송해요 여기까지가 제.. 한ㄱ...ㅖ가 아니다. 이 포기하고 싶을 때 바로 등장하는 히어로

 

 

5. 부모 요소에 overflow:hidden 속성 사용

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

짜잔~~ overflow: hidden을 주었더니 모든 게 다 해결.. 행복~~ ㅎㅎ

부모 요소에게 overflow:hidden을 주게 되면 새로운 block format context가 부모 요소 기준에서 만들어지면서 부모 요소의 마진과 자식 요소의 마진은 별개가 된다.

깔끔한 8 모양을 보면서 디자이너 분과도 사이좋게 지낼 수 있게 해 준 overflow: hidden 아 고마워~

 

overflow: hidden과 같은 맥락인 느낌으로 부모에게 display: flow-root를 주는 방법이 있는데 IE를 버려도 되는 프로젝트에서는 flow-root를 사용하는 방법도 좋지만 IE 호환성을 지켜야 하는 프로젝트라면 overflow: hidden을 사용하자!!! 하지만 만능 히어로일 것 같은 overflow: hidden 역시 자식이 넘쳐흐르는 디자인일 때는 table 요소를 넣는 것이 행복한 마진 병합 해결방법이다.

 

다들 따듯한 HTML, 행복한 CSS 작성하세요~~

 

읽어보면 좋을 MDN 문서 : https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context (block format context 관련 문서)

 

참고 : https://www.youtube.com/watch?v=c19Mjg-ivxc