마진 상쇄(collapsing margin) & 해결 방법

마진은 서로 만나면 병합된다.

1. 위쪽 요소의 margin-bottom과 아래쪽 요소의 margin-top은 병합된다.

<p class="first">첫 번째 문단</p>
<p class="second">두 번째 문단</p>
.first {
  font-size: 18px;
  /*p 태그의 디폴트 margin-bottom은 1em이므로 
  margin-bottom이 18px이 된다.*/
}
.second{
  margin-top: 40px;
}

이 때 첫 번째 문단과 두 번째 문단 사이 간격은 58px이 아니라 40px다. 왜냐하면 마진은 서로 상쇄하기 때문이다. 이렇게 마진이 병합되므로 위 요소의 margin-bottom, 아래 요소의 margin-top 중에 더 큰 값이 두 요소간의 간격이 된다.

참고로, 두 번째 문단도 p 태그이므로 디폴트 margin-top이 있지만, margin-top이 40px라고 명시해 줬기 때문에 margin-top은 40px이 됐다. 명시적으로 적어 준 마진이 디폴트 마진을 오버라이딩 하는 듯..? (아마?)

2. 부모 요소가 첫 번째 자식의 margin-top을 병합해서 자신의 margin-top으로 만든다.

<body>
  <div class="card">
    <h1>Hello</h1>
  </div>
</body>


여기 있는 h1의 margin-top을 100으로 만들고 싶어서 아래와 같이 css 코드를 입력하면

body {
  background-color: skyblue;
} /*배경이 하얘서 card 마진이 잘 안 보여서 body 배경색을 줬다.*/

.card {
  background-color: black;
}

h1 {
/*   margin-top: 50px; */
  color: white;
}


h1의 margin-top은 그대로고, 대신 부모인 card(div태그)의 margin-top이 100px이 된다. h1이 card의 ✨첫 번째 자식✨이어서, h1의 맨 위쪽이 card의 맨 위쪽을 건드리고 있기 때문이다.

🌿 이 경우에도 첫 번째 경우와 마찬가지로 부모의 margin-top과 첫 번째 자식의 margin-top 중 더 큰 값이 margin-top이 된다. card에 margin-top 속성을 줘도 그 값이 100px 미만이면 margin-top은 여전히 100px이다. 만약 card margin-top을 100px보다 큰 값, 예를 들어 120px을 준다면 card margin-top은 이제 120px이 된다(h1의 margin-top으로 적은 100px과 card margin-top인 120px 중 더 큰 값). 그러면 위 사진의 위쪽에 있는 하늘색 부분(card margin-top)이 20px 더 늘어난다. h1의 margin-top은 그대로다.

이렇게 마진이 병합되는 상황이 생길 때는 이 문제를 해결하기 위해 마진 대신 패딩(padding)을 쓴다.


card와 h1 범위를 알아보기 쉽게 card는 핫핑크색, h1은 초록색 테두리 색을 줬다.
h1 마진은 0이고 card 패딩만 20으로 준 상태.


이제 이렇게 h1의 margin-top이 잘 적용된다.

이유는? 부모 요소인 card에 생긴 padding이 h1의 마진(초록 테두리 위쪽 여백)과 card의 마진(핑크색 테두리 위쪽 여백(하늘색으로 표시된 곳) 사이에서 완충재(스티로폼처럼) 역할을 해서 두 마진이 더 이상 맞닿지 않기 때문이다. 맞닿지 않기 때문에 병합도 일어나지 않는다.

LeetCode1019.Next Greater Node In Linked List(체인 테이블의 다음 더 큰 노드)
[데이터 구조] 주소록 조회 시스템 의 디자인 과 실현 (산 목록 (해시 표)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage