하위 요소의 상단 여백이 경계 없는 상위 여백을 넘어 확장되는 이유는 무엇입니까?

상위 요소에 테두리가 없을 때 여백 위쪽 들여쓰기

상단 여백이 있는 요소가 경계를 넘어 확장되는 시나리오를 접할 때 상단 테두리가 없는 상위 요소는 당황스러울 수 있습니다. 이러한 들여쓰기로 인해 레이아웃에서 바람직하지 않은 간격이 발생할 수 있습니다.

이 특정 예에서는 주황색 div가 상단 테두리가 없는 녹색 div 내에 중첩되어 있습니다. 상단 여백이 30픽셀임에도 불구하고 주황색 div는 상위 요소 아래로 돌출됩니다.

이 문제를 해결하기 위한 한 가지 가능한 해결책은 녹색 div에 상단 테두리를 도입하는 것입니다. 그러나 테두리 없는 상단 가장자리가 디자인 요구 사항인 경우 이는 실현 가능하지 않을 수 있습니다.

대체 접근 방식은 녹색 div(.body)에 "overflow: auto"를 적용하는 것입니다. 이 기술은 요소 사이의 여백 축소를 방지하여 상위 경계 내에 주황색 div를 효과적으로 포함합니다.

아래 CSS 코드 조각은 이 솔루션의 구현을 보여줍니다.

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    overflow: auto;
}

이를 적용하여 수정 사항을 적용하면 주황색 div가 더 이상 녹색 div 너머로 들여쓰기되지 않아 레이아웃이 의도한 간격을 유지할 수 있습니다.

위 내용은 하위 요소의 상단 여백이 경계 없는 상위 여백을 넘어 확장되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!