아래의 예제 샘플을 보면, section 사이에 마진이 40px이여야하는데 20px로 되어 있다.
마진 병합 때문이다.
마진 병합이 되려면 아래 두조건이 성립되어야한다.
- 인접해 있는 형제 block 요소끼리만 일어난다.
- 빈 블록: 테두리, 안쪽 여백, 인라인 콘텐츠, height, min-height, max-height가 없으면 블록의 margin-top과 margin-bottom이 서로 상쇄됩니다.
- 상하단만 해당된다.
여백 상쇄 정복 - CSS: Cascading Style Sheets | MDN
여러 블록의 위쪽 및 아래쪽 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 여백 상쇄라고 부릅니다. 단, 플로팅 요소와 절대 위
developer.mozilla.org
See the Pen Untitled by Daewoong Kim (@daewoong-kim) on CodePen.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing
Mastering margin collapsing - CSS: Cascading Style Sheets | MDN
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of float
developer.mozilla.org
https://www.youtube.com/watch?v=c19Mjg-ivxc
'IT > web' 카테고리의 다른 글
| [css] :nth-child (0) | 2024.04.22 |
|---|---|
| [css] body에 배경을 변경했을 때 (0) | 2024.04.22 |
| [css] width, height 알 수 없는 div, 가로 세로 모두 가운데 정렬하기 (0) | 2024.04.21 |
| [css] em, rem (0) | 2024.04.21 |
| [css] line-height (0) | 2024.04.21 |
