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

중첩된 수직 여백 축소의 미묘한 차이 이해

CSS에서 여백 축소 개념은 요소 사이의 간격을 결정하는 데 중요한 역할을 합니다. 웹 페이지에서. 수직으로 인접한 요소의 여백이 닿으면 단일 여백으로 축소되어 예기치 않은 동작이 발생합니다. 중첩된 수직 여백 축소는 이 동작을 더욱 복잡하게 만듭니다.

중첩된 여백 축소 메커니즘

두 요소가 서로 중첩되어 여백이 닿는 경우 , 다음 두 가지 규칙 적용:

1. 여백 축소: 여백은 개별 여백의 최대 높이를 사용하여 단일 여백으로 축소됩니다.
2. 밀어넣기: 내부 요소가 컨테이너의 상단 테두리에 "붙어들어" 공간을 없애줍니다.

예를 들어 다음 HTML 및 CSS를 고려하세요.

<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>

이 경우 여백은 20px로 축소됩니다(최대 10px 및 20px), 내부 div는 외부 div의 상단에 밀착됩니다.

그러나 만약 있다면 내용이나 테두리가 분리 두 여백이 있으면 접힘이 사라집니다. 아래에 설명된 것처럼 요소 사이에 줄 바꿈 없는 공백이나 테두리를 추가할 때 이러한 현상이 발생할 수 있습니다.

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

참고: 이 동작은 절대, 고정, 고정으로 배치된 요소에는 적용되지 않습니다. 또는 떠다녔습니다.

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