Margin-Top이 상위 Div를 아래로 밀어내는 이유는 무엇이며 테두리를 사용하지 않고 어떻게 해결할 수 있습니까?

경계 없이 여백 상단이 상위 Div를 아래로 밀어내는 문제를 해결하는 방법

여백 상단이 있는 하위 요소가 상단 테두리가 없는 상위 요소 안에 있는 경우, 여백은 상위 요소를 아래로 밀어낼 수 있습니다. 이 동작은 바람직하지 않은 경우가 많습니다. 한 가지 해결 방법은 상위 요소에 위쪽 테두리를 추가하는 것이지만 이것이 항상 가능하거나 바람직한 것은 아닙니다.

대체 솔루션은 상위 요소에 Overflow: auto 속성을 사용하는 것입니다. 이렇게 하면 여백이 무너지고 상위 요소가 아래로 밀려나는 것을 방지할 수 있습니다. 예는 다음과 같습니다.

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

.body .container {
    background-color: blue;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

이번 변경으로 주황색 div가 더 이상 녹색 div를 아래로 밀어내지 않습니다.

위 내용은 Margin-Top이 상위 Div를 아래로 밀어내는 이유는 무엇이며 테두리를 사용하지 않고 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!