중첩된 요소에서 수직 여백 축소는 어떻게 작동합니까?

중첩된 수직 여백 축소의 메커니즘

중첩 요소의 수직 여백 축소 개념을 이해하는 것은 초보자에게 어려울 수 있습니다. 이번 글에서는 간단한 설명과 예시를 통해 이 동작을 쉽게 설명하겠습니다.

세로 여백 축소 기본

세로 여백 축소는 인접한 여백의 세로 여백이 무너지는 상황을 말합니다. 요소가 축소되거나 하나의 여백으로 병합됩니다. 이러한 축소는 두 개 이상의 수직 여백이 서로 닿아 하나의 더 큰 여백이 발생하는 경우 발생합니다.

중첩 요소 및 여백 축소

요소가 서로 중첩되면 수직 여백 축소에는 고유한 규칙 세트가 적용됩니다. 중첩된 항목은 테두리나 선행 텍스트와 같은 특정 요소로 분리되지 않는 한 컨테이너의 시작 부분에 밀접하게 정렬되는 'snuggling' 현상을 나타냅니다.

예

다음 HTML 구조를 고려하세요.

<code class="html"><div id="outer">
    <div id="inner">
        A
    </div>
</div></code>

외부 div의 여백 상단이 10px이고 내부 div의 여백 상단이 20px인 경우 세로 여백은 20px(최대 여백)로 축소됩니다. 두 여백 중). 결과적으로 내부 div는 아래 그림과 같이 외부 div의 상단에 꼭 맞습니다.

[중첩된 여백 축소 이미지]

여백 축소 방지

다음을 사용하여 접기를 방지할 수 있습니다.

• 중첩된 요소 사이의 테두리
• 컨테이너 내의 선행 콘텐츠(예: 텍스트)
• Non -공백 깨기

이러한 요소 중 하나를 도입하면 축소 메커니즘이 깨지고 개별 여백이 적용됩니다.

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