집 >웹 프론트엔드 >CSS 튜토리얼 >레이아웃에 영향을 주지 않고 여백 축소를 방지하는 방법은 무엇입니까?

레이아웃에 영향을 주지 않고 여백 축소를 방지하는 방법은 무엇입니까?

How to Prevent Margin Collapsing Without Affecting Layout?

레이아웃을 수정하지 않고 여백 축소를 비활성화하는 방법

여백 축소는 인접한 요소의 여백이 겹칠 수 있는 CSS 기능입니다. 이 동작은 특정 목적을 위해 사용되지만 때로는 레이아웃 디자인을 방해할 수도 있습니다. 이 문서에서는 문서에 원치 않는 시각적 변경을 도입하지 않고 여백 축소를 방지하는 방법을 살펴봅니다.

원래 CSS 튜토리얼에서 여백 축소를 해결하기 위해 제안된 두 가지 접근 방식은 요소에 테두리나 패딩을 추가하는 것입니다. 그러나 이러한 솔루션은 그 자체로 복잡하며 완벽한 픽셀 레이아웃을 방해할 수 있습니다.

시각적 모양에 영향을 주지 않고 여백 축소를 간단히 비활성화하려면 인접한 요소 사이에 보이지 않는 공백 요소를 삽입할 수 있습니다. 이 공백 요소는 다음 속성을 가져야 합니다.

overflow: hidden;
height: 0px;
width: 0px;

이 요소를 숨기면 레이아웃에 영향을 주지 않고 여백 축소를 효과적으로 방지할 수 있습니다. 다음은 이 기술을 보여주는 예제 HTML 코드입니다.

<html>
    <body>
        <div>

이 방법은 Firefox와 호환되며 대부분의 다른 최신 브라우저에서도 작동합니다. 레이아웃의 시각적 표현을 변경하지 않고 여백 축소를 비활성화하는 간단한 솔루션을 제공합니다.

위 내용은 레이아웃에 영향을 주지 않고 여백 축소를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：