마진 상쇄 정복

블록의 top 및 bottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))됩니다, 마진 상쇄(margin collapsing)로 알려진 행동.

마진 상쇄는 다음 세 가지 기본 경우에 일어납니다:

인접 형제 요소

인접 형제(siblings) 요소의 마진은 상쇄됩니다(나중 형제가 지난 부동체(floats)를 해제(clear)할 필요가 있는 경우는 제외). 예를 들어:

 <p>The bottom margin of this paragraph is collapsed...</p>
 <p>...with the top margin of this paragraph.</p>

부모 및 맏이/막내 요소

그 맏이(first child) 블록 margin-top에서 블록의 margin-top을 분리하는 보더, 패딩, 인라인 콘텐츠 또는 clear가 없거나 그 막내(last child) margin-bottom에서 블록의 margin-bottom을 분리하는 보더, 패딩, 인라인 콘텐츠, height, min-height 또는 max-height가 없는 경우, 그러면 그 마진은 상쇄합니다. 상쇄된 마진은 결국 부모 바깥이 됩니다.

빈 블록

그 margin-bottom에서 블록의 margin-top을 분리하는 보더, 패딩, 인라인 콘텐츠, height 또는 min-height가 없는 경우, 그러면 그 top 및 bottom 마진은 상쇄합니다.

더 복잡한 마진 상쇄(두 마진 이상의)는 이러한 경우가 결합될 때 일어납니다.

이러한 규칙은 심지어 0인 마진에도 적용됩니다, 그래서 맏이/막내의 마진은 부모 마진이 0이든 아니든 결국 그 부모 바깥이 됩니다(위 규칙에 따라).

음수 마진이 포함되는 경우는, 상쇄된 마진의 크기는 제일 큰 양수 마진과 제일 작은(절대값이 가장 큰) 음수 마진의 합입니다.

부동(floating) 및 절대 위치지정된(absolutely positioned) 요소의 마진은 상쇄하지 않습니다.

스펙

참조

• CSS 참고서
• CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.