여백 상쇄 (margin collapsing) 이해하기

프론트엔드 개발자라면 알고 있어야하는 여백 상쇄 (margin collapsing) 이해하기 여백 상쇄 여러 블록 요소가 나란히 있을 때 상단과 하단의 바깥 여백은 제일 큰 여백의 크기를 가진 단일 여백으로 결합 됩니다. 이를 여백 상쇄라고 합니다. 단, 플로팅 요소와 절대 위치를 지정한 요소의 여백은 상쇄되지 않습니다. 알아야 하는 이유 바깥쪽 여백 (margin)을 설정할 때 예기치 못한 결과가 발생할 수 있습니다. 각 요소에 바깥쪽 여백을 설정했는데 인접한 두 요소가 바깥쪽 여백 하나를 공유합니다. 부모요소 <section>이 갑자기 <h1> 과 같은 자식 요소의 바깥쪽 여백을 차지합니다. 이는 여백 상쇄 현상과 관련 있습니다. 기본적인 사례는 다음 세 가지 입니다. 기본 사례 3가지 1. 인접 형제 인접 형제 요소간의 바깥 여백은 더 큰 여백으로 상쇄됩니다. 첫 번째 요소는 바깥 여백이 10px입니다. 두 번째 요소는 바깥 여백이 5px 입니다. Demo: htt...

Submit