여백 상단이 경계 없는 상위 요소에 영향을 미치는 것을 방지하는 방법은 무엇입니까?

경계 없는 상위 요소의 CSS 여백 문제 해결

상위 요소에 위쪽 테두리가 없는 경우 여백은 하위 요소 상단으로 인해 상위 요소가 아래쪽으로 이동할 수 있습니다. 이 문제는 상위 요소에 위쪽 테두리를 추가하여 해결할 수 있지만 이는 원래 요구 사항에 위배됩니다.

그러나 이를 방지하는 대체 솔루션이 있습니다.

overflow를 추가하여 상위 요소

에overflow:auto를 적용합니다. 상위 요소에 자동을 적용하면 해당 컨테이너에 콘텐츠가 포함되도록 강제하여 여백 축소를 방지할 수 있습니다. 여백 축소는 인접한 여백을 단일 여백으로 병합하는 CSS의 동작입니다.

주어진 예에서 다음 CSS를 .body 클래스에 추가할 수 있습니다.

.body {
  overflow: auto;
}

이렇게 하면 여백 상단으로 인해 .body가 아래로 이동하는 것을 방지할 수 있습니다. 상단 클리어 프레임.

참고

• [W3C CSS2 사양: 여백 축소](http://www.w3.org/TR/CSS2/box.html# collapsing -여백)

위 내용은 여백 상단이 경계 없는 상위 요소에 영향을 미치는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!