CSS) margin 마진중복(병합, Collapse)

1. 마진 중복

 

예 1) 좌에서 우로 정렬하면 마직 중복 없음

html

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

 

css

.parent {

}
.child {
  width: 100px;
  height: 100px;
  background: tomato;
  float: left;
  margin: 20px
}

 

실행결과

 

 

예 2) 위에서 아래로 정렬하면 마진 중복이 발생

html

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

 

css

.parent {

}
.child {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 20px
}

 

실행결과

 

 

2. 마진 중복 계산법

html

.parent {
  width: 300px;
  height: 200px;
  background: cyan;
}
.child {
  width: 100px;
  height: 100px;
  background: tomato;
  margin-top: 50px;  
}

 

css

<div class="parent">
  <div class="child"></div>
</div>

 

실행결과

부모컨테이너의 위 또는 아래와 자식컨테이너의 위 아래가 만났을때, 자식컨테이너에 마진이 있으면 부모와 함께 적용되는 마진 중복이 발생한다.