마진상쇄

[CSS] 마진 겹침 현상(Margin-Collapsing)

마진 겹침 현상이란? 인접한 마진이 상쇄되는 현상을 말한다. 블록 요소에 한해서 좌우 방향은 적용되지 않고 오직 수직방향으로만 적용되며, 마진값이 0이더라도 상쇄 규칙은 적용된다. 또한 좌우 마진은 겹치더라도 상쇄되지 않는다. 이는 아래의 경우처럼 3가지 상황에서 발생한다. 1. 형제 박스요소 간에 상하 마진이 겹칠 때 div { background-color: tomato; width: 100px; height: 100px; } .d1 { margin-bottom: 60px; } .d2 { margin-top: 30px; } 위와 같을 때, 생각대로라면 d1과 d2에 각각 margin-bottom과 margin-top을 주었으니 전체 margin이 90px이 되어야 할 것같지만 그렇지 않다. 형제 블록..