Skip to content

Latest commit

 

History

History
33 lines (20 loc) · 932 Bytes

margin_collapsing.md

File metadata and controls

33 lines (20 loc) · 932 Bytes

마진

요소의 네 방향 바깥 여백 영역을 설정하는 css 속성.


마진 병합

인접하는 블록 요소의 상하단의 마진이 병합되는 현상.
이 때 마진의 크기는 마진 중에서 가장 큰 값으로 적용.


부모 자식 요소간의 마진 병합

부모가 마진이 0이고 안에 자식에게 마진을 줬을 경우 병합되는 현상.
자식에게 마진을 줬을 경우 부모에게 패딩을 준 것과 같은 효과가 생길 것이라 기대하지만
부모에게 마진이 적용된 것처럼 병합되는 현상을 보인다.

해결 방안

  1. 자식 요소를 inline-block으로 변경 => 자식 부모 뿐만 아니라 자식 간의 마진 병합이 사라짐.

  1. overflow: hidden 속성 이용 => 자식 부모 간의 마진 병합만 사라짐.

참고자료 https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin