CSS에서 여백 축소는 어떻게 작동합니까?

여백 축소: 설명

CSS에서 여백 축소는 웹 페이지에서 인접한 요소의 간격에 영향을 미치는 동작입니다.

마진의 이해 축소

일반적인 믿음과는 달리 요소에 여백, 패딩 또는 테두리가 설정되어 있지 않으면 여백 축소가 발생하지 않습니다. 대신, 두 개의 인접한 수직 여백이 존재할 때 발생합니다. 이러한 경우 두 여백 중 큰 쪽이 적용되고 작은 쪽은 무시됩니다.

여백 축소의 예

다음 예를 고려하세요.

<div>Block A</div>
<div>Block B</div>

블록 A의 하단 여백이 3em이고 블록 B의 상단 여백이 2em이라고 가정합니다. 다른 스타일을 적용하지 않으면 블록 A의 아래쪽 여백이 둘 중 더 크기 때문에 블록 사이의 세로 간격은 3em이 됩니다.

여백 축소 방지

인접한 요소에 테두리나 패딩을 추가하여 여백 축소를 방지할 수 있습니다. 이렇게 하면 여백이 0으로 설정된 경우에도 요소 사이에 간격이 생깁니다.

예를 들어 블록 B에 1px 상단 테두리를 추가하면 블록 사이의 세로 간격이 5em가 됩니다.

결론

여백 축소는 요소의 간격에 영향을 미치는 CSS 스타일의 기본 측면입니다. 웹페이지. 의도한 레이아웃을 만들고 예상치 못한 결과를 방지하려면 여백 축소가 발생하는 조건을 이해하는 것이 중요합니다.

위 내용은 CSS에서 여백 축소는 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!