마진상쇄
-
[CSS기초]box-sizing과 displayCSS 2023. 5. 22. 14:05
CSS에서 요소들은 모두 박스로 인식이 된다. 박스는 Content,Padding,Border,Margin으로 구성된다. content영역에 입력한 내용이 들어가고 그 주위를 Padding,Border,Margin이 감싸고 있다. 이러한 박스(요소)들은 마진 상쇄(margin collapsing)의 영향을 받는다. 이는 margin이 겹치는 현상을 말한다. 마진 상쇄가 발생하는 조건 1.인접 형제 요소의 여백이 겹칠때 두 개 이상의 요소가 형제 관계에 있고, 상단 및 하단 마진이 서로 닿아 있는 경우, 마진이 하나로 겹쳐진다. 결합된 마진의 크기는 두 마진 중 더 큰 값으로 결정된다. 2.비어 있는 블록 내용물이 없고 패딩이나 테두리도 없는 요소의 상단 및 하단 마진은 상쇄된다. box-sizing 속성..