바깥 여백의 상쇄

요소들의 위쪽 바깥 여백(margin-top)과 아래쪽 바깥 여백(margin-bottom)은 서로 상쇄되어[margin collapsing] 더 크게 지정된 수치를 따라 페이지가 렌더링된다.

<div style="margin: 10px;">
  요소 A
</div>

<div style="margin: 10px;">
  요소 B
</div>

<div style="margin: 30px 10px;">
  요소 C
</div>

요소들이 위와 같이 있을 때, 먼저 요소 B와 요소 C 사이의 공간은 각 요소에 지정된 margin을 더한 40px이 되는 것이 아니라 더 크게 지정된 요소 C의 상하 바깥 여백을 따라 30px이 된다. 마찬가지로 요소 A와 요소 B 사이의 공간은 20px이 되는 것이 아니라 10px이 된다. 이중 어느 한 요소의 상하 바깥 여백을 변경할 경우, 두 요소 사이의 공간은 더 크게 지정된 상하 바깥 여백을 따르게 된다. 예를 들어 요소 B의 바깥 여백을 수정해 위쪽 바깥 여백만을 50px로 고치면, 요소 A와 요소 B 사이의 공간은 더 큰 수치가 지정된 요소 B의 50px을 따르게 되며, 요소 B와 요소 C 사이의 공간은 더 크게 지정된 요소 C의 30px을 따르게 된다.

results matching ""

    No results matching ""