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

CSS 초보자를 위한 중첩된 수직 여백 축소 이해

중첩된 수직 여백 축소는 요소가 사용될 때 여백이 상호 작용하는 방식을 제어하는 ​​CSS 레이아웃의 기본 개념입니다. 서로 중첩되어 있습니다. 이를 이해하기 위해 이 동작을 결정하는 규칙을 살펴보겠습니다.

• 여백 축소: 두 여백이 만나면 단일 여백으로 축소되며 축소된 값이 최대값이 됩니다.
• 여백 밀집: 여백만 중첩 요소를 포함 요소에서 분리하는 경우 중첩 요소는 포함 요소의 시작 부분에 "밀착"됩니다.
• 흐름 예외: 여백 축소 및 snuggling은 부동 요소, 절대적 위치 요소 또는 위치 고정 요소와 같은 일반 흐름 외부 요소에 적용되지 않습니다.

다음을 고려하세요. 이러한 규칙을 설명하는 다음 예는 다음과 같습니다.

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

다음 스타일이 주어지면:

<code class="css">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}
#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

• 외부 여백과 내부 여백은 서로 닿기 때문에 접혀서 결합된 여백은 20픽셀이 됩니다.
• 내부 div는 외부 div를 분리하는 것이 없기 때문에 외부 div의 상단에 꼭 맞습니다.

그러나 요소 사이에 줄 바꿈 방지 공백 문자를 추가하거나 내부 div에 테두리를 지정하면 여백이 무너지는 것을 방지할 수 있습니다. 이는 공백이나 테두리가 여백 사이를 구분하기 때문입니다.

개발자는 이러한 규칙을 이해하면 중첩된 요소의 레이아웃 동작을 예측하고 제어하여 브라우저 간 일관성과 예측 가능한 결과를 보장할 수 있습니다.

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