상위 요소에 항상 하위 요소 여백이 일관되게 포함되지 않는 이유는 무엇입니까?

상위 요소의 일관되지 않은 여백 포함

여백이 있는 요소가 다른 요소 내에 배치되면 상위 요소가 항상 일관되게 래핑되거나 래핑되지는 않습니다. 그 마진을 포함합니다. 이러한 불일치는 특히 테두리, 위치, 표시 및 오버플로와 같은 다른 속성의 동작과 비교할 때 직관에 어긋나는 것처럼 보입니다.

여백 겹침 및 축소

직관적으로는 CSS 사양에 설명된 대로 여백 축소가 이 동작에 영향을 준다고 가정합니다. 그러나 겹치는 여백이 없고 브라우저 전반에 걸쳐 일관된 동작이 있음에도 불구하고 이러한 불일치의 근원은 다른 곳에 있습니다.

여백 억제 이면의 논리

CSS 사양은 실제로 정의합니다. 이 행동에는 약간의 모순이 있기는 하지만요. 사양에서는 각 항목이 적용되는 조건을 명확하게 구분하지 않고 "여유 여백"(상위 요소 너머로 확장되는 여백)과 "접힌 여백"(겹치는 인접 여백)에 대해 설명합니다.

데모 및 결론

다음 데모는 이러한 불일치 동작을 보여줍니다.

<code class="html"><div class="block">
  <h2 style="margin: 80px;">Is the margin contained (block)?</h2>
</div>
<div class="inline-block">
  <h2 style="margin: 80px;">Is the margin contained (inline-block)?</h2>
</div>
<div class="position-absolute">
  <h2 style="margin: 80px;">Is the margin contained (position-absolute)?</h2>
</div>
<div class="overflow-auto">
  <h2 style="margin: 80px;">Is the margin contained (overflow-auto)?</h2>
</div>
<div class="border">
  <h2 style="margin: 80px;">Is the margin contained (border)?</h2>
</div></code>

"block" 요소(기본 여백 동작 포함)를 다른 모든 요소와 비교할 때 불일치가 분명합니다. 강요. 일반 div의 기본 동작을 제외한 모든 항목에서는 여백이 상위 항목에 포함되어 있다고 가정하는 것으로 보입니다.

이 복잡한 동작은 여백 축소 및 여유 여백과 관련된 CSS 사양의 모호함에서 비롯됩니다. 안타깝게도 문서에서는 이러한 개념이 테두리, 위치 및 오버플로와 같은 다양한 요소 속성과 어떻게 상호 작용하는지에 대한 명확한 설명을 제공하지 않습니다.

위 내용은 상위 요소에 항상 하위 요소 여백이 일관되게 포함되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!