중첩된 여백은 어떻게 축소되며 언제 축소를 방지합니까?

중첩된 세로 여백 축소 이해

많은 개발자가 중첩된 요소의 세로 여백 축소 개념으로 어려움을 겪고 있습니다. 초보자를 위해 이 개념을 단순화하겠습니다.

두 개의 중첩된 div를 상상해 보세요.

<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div> 

처음에는 내부 div의 20픽셀 여백이 우선합니다. 그러나 기억해야 할 두 가지 주요 규칙이 있습니다:

1. 터치 시 접기:
인접한 요소의 여백이 닿으면 접힙니다.

2. 중첩된 요소 추가:
여백이 만 중첩된 요소를 구분하는 경우 내부 요소가 외부 요소에 대해 "밀착"됩니다.

다음 규칙을 예시에 적용:

• 중첩된 div의 여백이 닿아 여백이 발생합니다. 축소됩니다.
• 더 큰 여백이 있음에도 불구하고 내부 div는 외부 div의 위쪽 가장자리에 밀착됩니다.

따라서 전체 블록은 최대 축소 여백(20px)을 적용합니다. 전체 div.

예외 축소:

그러나 다음과 같은 경우 여백 축소 동작이 변경됩니다.

• 요소 사이에 테두리나 패딩이 있습니다.
• 내부 요소가 실제로는 아닙니다. 중첩됨(예: 부동 또는 위치 지정됨) 절대적으로).

접기 없음의 예:

잘라내지 않는 공백(또는 테두리)을 추가하면 여백이 구분되어 접히는 것을 방지할 수 있습니다.

<div id="outer"> 
<div id="inner">
A
</div>
</div>

이 경우 내부 div의 여백(20px)이 자체 공간에 적용되고 외부 div는 div의 여백(10px)은 주변 영역에 적용됩니다.

이러한 규칙과 예외를 이해하면 이제 중첩된 여백을 사용하여 요소의 간격을 효과적으로 제어할 수 있습니다.

위 내용은 중첩된 여백은 어떻게 축소되며 언제 축소를 방지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!