CSS - 마진 병합 현상

형제간의 마진 병합

<div class="box1">Hello World</div>
<div class="box2">Hello World</div>

/* style.css 문서 */
.box1 { margin-bottom: 150px; }
.box2 { margin-top: 100px; }

한 쪽은 150px이라고 하는 margin-bottom이고, 한 쪽은 100px margin-top이니까 box1과 box2영역의 마진 부분이 겹쳐. 공통된 부분을 두 개의 영역이 공유하게 되면, 이 공간의 크기는 250px이 되는게 아니라 150이 됨. 항상 큰 값에 우선순위가 있어서 큰 값이 작은 값을 병합시켜버리는 것.

 

 

 

부모-자식간의 마진 병합

<main role="main">
  <article>
  </article>
</main>

/* style.css 문서 */
article {
  width: 200px;
  height: 200px;
  margin-top: 100px;
}

main이라고 하는 공간 안에 자식으로 article이 있는 상황. 근데, 이 article 자식에다가 margin-top을 적용하게 되면, 이론상으로는 이 자식만 밑으로 내려가야 되는데, 부모까지 포함해서 밑으로 내려가게 됨. 부모인 <main>에도 영향을 미치는 것.