[CSS] margin의 bottom-top 동시에 밀어내지 못하는 이유

마진 상쇄 때문이다.

---

마진(margin) 속성은 요소의 바깥에서 '밀어내는' 속성을 가진다. 그런데 margin top,bottom을 동시에 30px 적용하면 어떻게 될까? 30px + 30px = 60px로 서로 밀려나는 게 아니라, 30px만이 적용된다.

마진

마진 상쇄는 인접한 블록 요소 사이의 margin-top과 margin-bottom이 겹칠 경우 두 마진 중 더 큰 값 하나만 적용된다. 아래는 MDN 공식 문서의 예제 코드이다.

 

<p>The bottom margin of this paragraph is collapsed …</p>
<p>
  … with the top margin of this paragraph, yielding a margin of
  <code>1.2rem</code> in between.
</p>

<div>
  This parent element contains two paragraphs!
  <p>
    This paragraph has a <code>.4rem</code> margin between it and the text
    above.
  </p>
  <p>
    My bottom margin collapses with my parent, yielding a bottom margin of
    <code>2rem</code>.
  </p>
</div>

<p>I am <code>2rem</code> below the element above.</p>

 

div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}

실행 예시

노란색 배경색이 주어진 <p> 문단의 아래 여백이 top margin 0.4rem을 무시하고 1.2rem을 유지하는 모습을 확인할 수 있다.

 

따라서 일반적으로는 일관성 있게 margin-bottom을 이용해서 요소 사이의 마진을 조절한다.

왜냐하면 HTML문서는 위 -> 아래로 쌓이는 구조이기 때문에, 위에있는 요소에서 margin-bottom을 이용해서 margin을 부여하는 구조가 자연스럽다.

 

 

따라서 위아래로 요소를 밀고 싶다면

padding 또는 margin 값을 주어 벽을 만들어 밀어냄으로써 의도했던 대로 동시에 밀어낼 수 있다.

 

 

FlexBox에서는 예외

margin-left, right 동시 적용

flex에서는 margin을 부여했을 때 box요소가 '늘어난'기준으로 배치되기 때문에, 마진 상쇄가 일어나지 않고 독립적으로 계산되어 서로 밀어낸다.

 

 

출처:

mdn web docs - 여백 상쇄 정복

여백 상쇄 정복 - CSS: Cascading Style Sheets | MDN

Kimaramy님 velog 글 - CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해