마진상쇄1 CSS 마진(여백) 상쇄 css를 사용하다 보면 이해할 수 없는 현상 때문에 골 머리를 앓는 경우가 많다. 그중 하나가 바로 마진 상쇄 때문이다. margin 상쇄란? 여러 블록의 위아래 margin은 경우에 다라서 큰 margin을 가진 여백으로 상쇄되는 현상인데. floating 요소나 position이 absolute 인 경우에는 상쇄되지 않는다. margin collapsing(마진 상쇄)이 일어나는 이유 1. 인접 형제 요소 간 바깥 여백이 겹칠 때. 1번 BOX 2번 BOX 3번 BOX 위아래 겹치는 margin : 30px의 값이 상쇄됨을 확인할 수 있다. 1번 BOX 2번 BOX 3번 BOX 이번엔 1번 BOX의 margin-bottom값을 60으로 준 상태. 위 이미지에서 확인할 수 있듯. 더 큰 값의 margi.. 2020. 8. 12. 이전 1 다음