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

중첩된 수직 여백 축소 이해

CSS의 수직 여백 축소 개념은 특히 요소를 중첩할 때 당황스러울 수 있습니다. 간단한 설명으로 메커니즘을 분석해 보겠습니다.

여백 축소를 제어하는 ​​두 가지 필수 규칙:

1. 터치 여백 축소: 인접한 요소의 수직 여백이 터치되는 경우 , 단일 여백으로 축소됩니다.
2. 중첩된 스너글: 여백만 중첩된 요소를 분리하는 경우 내부 요소의 여백으로 인해 생성된 공간을 제거하여 함께 "밀착"됩니다.

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

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

초기 CSS 스타일:

<code class="CSS">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}

#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

이 시나리오에서는 중첩된 div의 여백(20px)으로 인해 여백 축소가 발생합니다. 외부 div의 여백(10px)을 사용하면 전체 블록에 대한 총 여백이 20px가 됩니다. 그런 다음 내부 div는 여백이 없는 분리가 없기 때문에 컨테이너의 시작 부분까지 끌어안습니다.

그러나 테두리나 줄바꿈 없는 공백과 같이 여백 사이에 분리가 도입되면 , 붕괴가 깨졌습니다. 이는 더 이상 "접촉"으로 간주되지 않는 여백이 축소되지 않기 때문입니다.

이 규칙은 일반 흐름 외부의 요소(예: 부동 요소 또는 절대 위치 요소)에는 적용되지 않는다는 점을 기억하세요. 이러한 개념을 이해하면 CSS에서 요소를 중첩할 때 수직 여백이 어떻게 작동하는지 명확하게 이해하는 데 도움이 됩니다.

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