margin이란?
- 요소의 상하위아래 바깥 여백을 설정함
margin-top,margin-right,margin-bottom,margin-left의 단축 속성으로margin을 사용할 수 있음- 두 개 이상의 요소는 위 아래 여백이 종종 합쳐져 하나의 여백이 되는 여백 상쇄가 일어날 수 있음
여백 상쇄 Margin Collapsing
- = 마진 상쇄 = 마진 겹침 현상
- 경우에 따라 여러 블록의 위, 아래 margin이 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되는 것
- 겹쳐진 여러 요소가 조건에 부합한다면 여백 상쇄가 여러번 중복되어 나타날 수도 있음
- 블록 서식 맥락(BFC)이 생성되었을 경우 여백 상쇄가 일어나지 않음:
float,position: absolute,flex,grid등
발생 상황
1. 인접 형제일 경우
- 겹쳐진 두 마진을 비교하여 더 큰 마진값을 적용함
- 겹쳐진 두 마진의 값이 동일할 경우 하나만 적용됨
2. 부모와 자손을 분리하는 콘텐츠가 없을 경우
- 상쇄된 여백은 부모 블록의 바깥에 위치함
- 부모의 margin 값과 관계없이 자손의 margin이 부모 밖으로 빠져 나옴
조건
- 부모 블록에 콘텐츠에 경계를 구분짓는 요소(
border/padding/inlinecontent)가 없고 - 부모의
margin-top과 자손의margin-top의 경계가 없는 경우 - 부모의
margin-bottom과 자손의margin-bottom를 경계지을height,min-height,max-height가 존재하지 않는 경우
예시
<header class="header">
<h1>웹카페</h1>
</header>body {
background: #ccc;
}
.header {
background: yellow;
}
.header h1 {
margin: 30px 0;
}
3. 빈 블록의 상하 마진이 겹칠 때
- 높이(height)가 0인 상태의 block 요소일 때 top과 bottom을 구분할 수 있는 경계가 없어 margin이 겹쳐지는 문제가 발생됨
- 콘텐츠에 경계를 구분짓는 요소(
border/padding/inlinecontent) 또는 직접적인height,min-height,max-height가 없을 때 마진 상쇄 발생
여백 상쇄 규칙
- 여백 상쇄가 발생하는 경우들이 서로 결합되어 더 복잡한 여백 상쇄가 일어날 수 있음
- margin 값이 0이어도 적용됨
- 음수 값의 margin을 포함할 경우: 상쇄된 여백 크기 = 제일 큰 양수 여백 + 제일 작은 여백
- 모든 margin이 음수 값을 가질 경우
- 상쇄된 여백 크기 = 제일 작은 여백의 크기
- 인접 요소, 중첩 요소 모두 적용됨
여백 상쇄 해결 방안
인접 형제일 경우
height / min-height / padding / border 등 상하로 늘어나는 속성 값을 명시적으로 주지 않은 경우 →(여러 실험을 통해 이 해결 방안이 확실하지 않음을 알게 됨. 확실한 사례를 발견하면 추가 할 예정)height, min-height, padding, border값을 명시적으로 기입하여 콘텐츠 간의 경계를 명확히 함
빈 블록의 상하 마진이 겹칠 때
display: inline-block기입
부모와 자손을 분리하는 콘텐츠가 없을 경우
- 부모 요소에
display: inline-block기입 - 부모 요소에
border: 1px solid transparent기입
여백 상쇄 예외 사항 고려하기
- 블록 서식 맥락(BFC)를 적용
참고
박선우