Margin서로 상하좌우 충돌할 경우
margin 이 작은쪽이 큰 쪽에 먹힘
1. 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용
2. 빈 요소의 상/하 마진이 겹칠 경우 ==> 빈 요소의 마진 Top or Bottom 1개만 남음(위 아래로 박스에 마진이 붙었을 지라도)
3. 부모 박스와 자식 박스의 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용
- 부모의 마진이 자식의 마진보다 클때
- 부모의 마진이 자식의 마진보다 작을 때
아래 사이트가 설명 잘 해놓음
https://seons-dev.tistory.com/entry/css-Collapsing-Margin
The Basic Concepts
What’s important to know is :
- Margin collapse only happens vertically.
- It only happens to block-level elements — this does not include inline-block elements[1].
- It only happens if the elements come in direct contact with each other (they can’t be separated by padding, borders, line boxes, etc, or be in a different formatting context[1]).
참조
https://medium.com/@joseph0crick/margin-collapse-in-css-what-why-and-how-328c10e37ca0
'나의 FE피봇이야기 > HTML || CSS' 카테고리의 다른 글
[HTMl]form&post w enctype (0) | 2023.08.22 |
---|---|
[HTML]Radio button 단일 선택 방법 (0) | 2023.08.22 |
[HTML] Loading="lazy" 렌더링 속력 올리기 (0) | 2023.07.29 |
[HTML]링크를 연결 할 때 키워드 만들기 (0) | 2023.07.29 |
[Front-end]HTML, MarkUp (0) | 2023.07.15 |