마진 상쇄 정복

블록의 topbottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(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 Level 2 (Revision 1)
The definition of 'margin collapsing' in that specification.
Recommendation 초기 정의

참조

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: ahnjungho, Netaras
 최종 변경: ahnjungho,