플로트 요소가 위에 있을 때 상단 여백이 축소되는 이유는 무엇입니까?

플로팅 요소가 있을 때 위쪽 여백이 무시되는 이유

HTML 요소의 위쪽 여백은 다음과 같은 경우 무시되는 경우가 많습니다. 그 앞에 떠 있는 요소. 이 동작은 "플로트 상자 전후에 생성된 위치 지정되지 않은 블록 상자가 마치 플로트가 존재하지 않는 것처럼 수직으로 흐른다"는 것을 나타내는 CSS 사양에서 비롯됩니다.

이러한 상황에서 플로트 요소는 최고 마진 계산에 기여하지 않습니다. 결과적으로 후속 요소는 공백 없이 플로팅 요소와 인접한 것처럼 보입니다.

이 문제를 해결하기 위한 간단한 접근 방식은 후속 요소 주위에 래퍼 요소를 도입하는 것입니다. 이 래퍼는 래핑된 콘텐츠에서 플로팅된 요소를 분리하는 버퍼 역할을 합니다.

결정적으로 래퍼의 간격은 여백이 아닌 내부 패딩으로 지정되어야 합니다. 이렇게 하면 다른 부동 요소와 같은 외부 요인이 래퍼와 부동 요소 사이의 간격을 방해하지 않습니다.

설명을 위해 다음 수정된 HTML 스니펫을 고려하세요.

<div>

이 접근 방식을 사용하면 플로트 요소가 있는 경우에도 후속 요소가 지정된 상단 여백을 준수하도록 보장할 수 있습니다.

위 내용은 플로트 요소가 위에 있을 때 상단 여백이 축소되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!