상하 여백이 겹치는 전송 문제

강박장애가 나에게 정말 심각한 질병이라는 것을 깨달았습니다. . . 모든 상황은 매번 테스트되어야 합니다. . . 그런데!!!!!!!!아쉬운 건 기억이 잘 안 나는 상황이 너무 많다는 거예요. . . 아직도 코드를 작성할 때 계속해서 오류를 만들고 문제를 해결해야 해요~ 더 이상 참을 수가 없어요! 하지만 이 부분을 여기서 요약해 보겠습니다~

다음 부분은 마진 중복 문제의 모든 상황을 다루어야 합니다.

1. 두 개의 일반 요소 위와 아래의 마진은 어느 쪽이든 하나의 마진으로 병합됩니다.

두 개의 플로팅 요소에는 여백 전송 문제가 없습니다. 위쪽 요소의 margin-bottom과 아래쪽 요소의 margin-top은 둘 사이의 여백 값으로 계속 추가됩니다.

2. 두 요소가 포함된 경우 상위 요소와 하위 요소의 위쪽 및 아래쪽 여백 값도 병합됩니다. (권장 학습: CSS 비디오 튜토리얼)

부모 요소는 테두리를 추가하지 않고 너비와 높이를 설정하지 않습니다. 즉, 부모가 haslayout	을 트리거하지 않으면 IE6, 7 및 표준 브라우저에서는 여백 전송 문제가 발생합니다. 요소와 상위 요소는 동일하며(하위 요소의 상단은 상위 요소의 상단과 직선이 됩니다. 하단은 상위 요소의 하단과 직선이 됩니다.) 상위 요소는 상위 요소의 margin-top 값과 margin-bottom 값 중 더 큰 값을 선택하세요! ! ! 하위 요소의 margin-left 및 margin-right 값은 여전히 ​​존재합니다.
상위 요소가 테두리를 추가하지 않지만 너비, 높이 또는 확대/축소: 1이 설정되는 경우; 부모는 haslayout을 실행할 수 있는 속성을 추가합니다	표준 브라우저에서는 여백 전송이 발생하지만 IE6 및 7에서는 여백 전송이 발생하지 않습니다. 즉, 하위 요소의 여백은 상위 요소에 상대적이며 그렇지 않습니다.
부모가 테두리를 추가하고 부모가 haslayout을 트리거하지 않는 경우	표준 브라우저에서는 여백이 전달되지 않습니다. IE6 및 7에서는 하위 요소의 여백이 사라집니다. 완전히!
부모가 테두리를 추가하고 부모가 haslayout을 트리거하는 경우(즉, 너비, 높이 또는 확대/축소 추가: 1)	IE6, 7 및 표준 브라우저에서는 여백 전송이 발생하지 않습니다! ! !

IE6 및 7의 경우:

즉, haslayout이 트리거되는 한 테두리가 추가되는지 여부는 중요하지 않습니다. 상위 요소 여부에 관계없이 표준 브라우저의 마진은 전달되지 않으며 IE6 및 7에서는 마진이 전달되지 않습니다! ! !

표준 브라우저의 경우:

테두리만 추가하면 여백 전달을 피할 수 있습니다! ! !

상위 요소에 테두리를 추가하면 하위 요소와 상위 요소 사이의 여백에 구분선이 생기고 병합 현상이 발생하지 않습니다! 자식 요소에 테두리를 추가하면 둘의 여백 값이 아직 분리되지 않아 계속해서 겹침이 발생하게 됩니다!

여기서 상위 요소에 여러 개의 블록 하위 요소가 포함된 경우 위쪽 및 아래쪽 여백은 각 하위 요소 사이에서 겹치고 둘 사이의 더 큰 여백이 둘 사이의 여백으로 선택됩니다. 첫 번째 하위 요소의 상단은 상위 요소와 겹치고(왼쪽 그림 위의 흰색 영역은 브라우저 상단의 흰색 영역임) 마지막 하위 요소의 하단이 상위 요소와 겹칩니다. IE6, 7 및 표준 브라우저의 표시 효과는 왼쪽과 같습니다.

이때 두 블록 요소가 플로팅 요소인 경우 하위 요소와 상위 요소 간에 마진 이전이 발생하지 않습니다. 이때 위쪽 및 아래쪽 여백은 다음과 같습니다. 값은 2개이고, 그 사이의 각각의 마진 값을 합산한 것입니다! 표준 브라우저는 아래 그림과 같이 표시되고, IE6은 아래 그림 오른쪽과 같이 표시됩니다. 그런데 왜 디스플레이가 다를까요?

왜냐하면 맙소사! 하나의 파도가 또 다른 파도로 다가옵니다! 블록 요소, 수평 여백 및 부동 소수점은 IE6에서 새로운 호환성 문제인 이중 여백 버그를 일으켰습니다(IE7에는 이중 여백 버그가 없습니다!!!!)

여기서

실제로는 먼저 haslyout을 트리거하는 속성을 상위 요소에 추가해야 합니다! 이 문서에서는 IE6 및 7에서 마진 전송 문제 또는 마진 값 사라지는 문제가 발생하지 않도록 보장합니다. 테두리가 없을 때 발생하는 마진 전송 문제를 해결할 수 있습니다. 그러나 이때 부동 소수점을 추가하면 이중 마진 버그가 발생합니다. 따라서 실제로는 플로팅 블록 요소의 여백을 패딩으로 바꾸려고 합니다. 변경할 수 없는 경우에는 display:inline;을 추가합니다.

3. 두 Div(A, B) 사이에는 마진 값이 없지만 A에는 마진이 있는 하위 요소가 있습니다. 하위 요소는 두 요소 모두에 전달됩니다. 그 동안 두 요소 A와 B 사이의 여백은 수직 방향으로만 채워집니다! ! ! 이 질문에 대해서는 사실 매우 간단합니다. 사실 요약은 위의 요약 내용입니다.

이 마진 전달과 겹침은 두 마진 값 사이에 경계선이 없거나 패딩이 마진 영역을 구분하기 때문이라고 생각합니다! ! ! !

위 내용은 상하 여백이 겹치는 전송 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!