'margin-top'이 있는 하위 Div와 상단 테두리가 없는 상위 Div 사이의 여백 축소를 방지하는 방법은 무엇입니까?

CSS: 상위 Div에 상단 테두리가 없을 때 여백 상단 관리

하위 요소에 여백 상단이 있고 해당 상위 요소에 상단 테두리가 없으면 하위 요소는 요소의 여백으로 인해 시각적 불일치가 발생할 수 있습니다. 제공된 이미지에 설명된 것처럼 주황색 div는 녹색 div를 아래로 밀어내는 것처럼 보이지만 녹색 div에는 상단 테두리가 없습니다.

상위 div에 테두리를 추가하지 않고 이 문제를 해결하려면 다음을 구현할 수 있습니다. 마진 붕괴를 방지하는 솔루션입니다. 여백 축소는 인접한 요소(이 경우 녹색 및 주황색 div)의 여백이 단일 여백으로 축소될 때 발생하는 CSS 동작입니다.

여백 축소를 방지하려면 상위 요소에 다음 CSS를 추가하세요.

overflow: auto;

제공된 CSS 스니펫의 .body에 Overflow:auto를 적용하면 여백 축소를 방지하고 원하는 시각적 배열을 유지할 수 있습니다. W3C 사양에서 마진 축소에 대한 자세한 내용을 확인할 수 있습니다: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

위 내용은 'margin-top'이 있는 하위 Div와 상단 테두리가 없는 상위 Div 사이의 여백 축소를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!