> 웹 프론트엔드 > CSS 튜토리얼 > CSS의 중첩 요소에서 수직 여백 축소는 어떻게 작동합니까?

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

Mary-Kate Olsen
풀어 주다: 2024-10-31 02:24:29
원래의
501명이 탐색했습니다.

How Does Vertical Margin Collapse Work With Nested Elements in 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿