[HTML/CSS] Margin 병합 현상

형제지간의 마진 병합

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

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

• margin-bottom과 margin-top 중 숫자가 큰 값으로 적용

 

부모자식의 마진 병합 (❗️주의)

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

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

• 자식인 <article> 뿐만 아니라 부모인 <main>에도 영향을 미침