중첩된 수직 여백 축소 이해
CSS의 수직 여백 축소 개념은 특히 요소를 중첩할 때 당황스러울 수 있습니다. 간단한 설명으로 메커니즘을 분석해 보겠습니다.
여백 축소를 제어하는 두 가지 필수 규칙:
다음 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!