CSS
[Box model] margin 중복
하루
2021. 12. 19. 18:27
마진 중복(병합)
마진의 특정 값들이 '중복'되어 합쳐지는 현상.
마진 중복은 버그(오류)가 아니다. 현상을 우회하거나 응용할 수 있다.
- 형제 요소들의
margin-top과margin-bottom이 만났을 때 - 부모 요소의
margin-top과 자식요소의margin-top이 만났을 때 - 부모 요소의
margin-bottom과 자식 요소의margin-bottom이 만났을 때
마진 중복 계산법
| 조건 | 요소A 마진 | 요소B 마진 | 계산법 | 중복값 |
| 둘 다 양수 | 30px | 10px | 더 큰 값으로 중복 | 30px |
| 둘 다 음수 | -30px | -10px | 더 작은값으로 중복 | -30px |
| 각각 양수와 음수 | -30px | 10px | -30+10=-20 | -20px |
