마진 상쇄(margin collapsing) 너 왠지 열받아

🎀 마진 상쇄, 니가 뭔데

붙어 있는 요소가 각각 margin을 가지고 있을 때 겹치는 현상을 말한다.
영어로는 "margin collapsing"이라고 말한다.

위 이미지 처럼 첫 제목의 margin:10px이고 아래 영역의 margin:30px일 때,
마진 상쇄가 일어나서 가장 큰 margin인 30px이 적용되어 있는 것을 확인할 수 있다.

• 이웃하는 요소 끼리는 마진 상쇄가 일어난다.
• 부모 자식 요소 끼리도 마진 상쇄가 일어날 '수' 있다.

왜 일어날 '수' 있다고 말을 했냐면,
부모 자식간에 border나 padding이 있어서 경계가 생긴 경우에는 마진 상쇄가 일어나지 않기 때문이다.

🎀 적을 이기려면 적을 이해해야 한다.

a와 b 영역 사이의 margin은 몇 px일까?

<div id="a" style="margin: 30px;">
  a
</div>
<div id="b" style="margin: 10px;">
  b
</div>

• margin이 겹칠때는 둘 중 가장 큰 margin이 적용되기 때문에 30px이다.

<div id="a" style="margin: 30px;">
  a
    <div id="c" style="margin: 40px;">
    c
    </div>
</div>
<div id="b" style="margin: 20px;">
  b
</div>

• a와 그 자식 요소인 c가 겹치면, 가장 큰 px인 c요소의 40px이 적된다.
  b영역이 겹쳐도, 가장 큰건 40px이기 때문에 최종적으로 40px이 적용된다.

<div id="a" style="padding: 10px;margin: 30px;">
  a
    <div id="c" style="margin: 40px;">
    c
    </div>
</div>
<div id="b" style="margin: 20px;">
  b
</div>

• a영역에 padding이 있기 때문에 30px이 적용되어지고, a와 b를 비교했을 때 30px이 더 크니까 최종적으로 30px이 적용된다.

<div id="a" style="margin: 30px;">
  a
    <div id="c" style="margin: 40px;">
    c
    </div>
</div>
<div id="b" style="margin: 20px;border:1px solid #000;">
  b
</div>

• a와 c영역 중에서 가장 큰 margin은 40px이고 b와 비교해서 40px이 더 크니까 40px이 최종적으로 적용된다.
  만약 b 영역 안에 자식 요소가 있다면 border를 경계로 보고 상쇄는 일어나지 않을 것이다.

🎀 어캐 싸우면 이김?

• margin 대신에 padding으로 여백을 만든다.
• 부모나 자식 요소에 border나 padding을 준다.
• flex나 grid를 사용한다.