하위 Div의 여백이 테두리 없는 상위 Div의 높이에 영향을 미치지 않도록 하려면 어떻게 해야 합니까?

CSS: Margin-Top 및 Borderless Parent Div

설명된 시나리오에서 하위 주황색 div는 30px 상단 여백으로 설정됩니다. 상단 테두리가 없는 녹색 상위 div. 상단 테두리가 바람직하지 않음에도 불구하고 여백이 상위 div를 아래로 밀 때 문제가 발생합니다.

이 문제를 해결하려면 테두리 없는 상위 div를 유지하면서 다음 구현을 고려하세요.

.body {
    overflow: auto;
}

상위 div ".body"에 "overflow: auto"를 추가하면 브라우저의 여백 축소 동작이 호출됩니다. 이렇게 하면 하위 div의 위쪽 여백이 경계를 넘어 확장되지 않고 상위 div 내에 포함될 수 있습니다.

이 접근 방식을 사용하면 녹색 div에 경계선이 없는 상태를 유지하면서 여백 축소를 방지하여 하위 주황색 div를 적절하게 배치할 수 있습니다. 상위 div의 높이에 원치 않는 변화를 일으키지 않습니다.

위 내용은 하위 Div의 여백이 테두리 없는 상위 Div의 높이에 영향을 미치지 않도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!