이유 1:
외부 여백 병합 margin-top 속성이 유효하지 않습니다. 코드 예는 다음과 같습니다.
개미 부족
. first{
폭: 100px;
하이트: 100px;
Background-color: red;
Margin-bottom: 60px;
}
. second{
폭: 100px;
하이트: 100px;
Background-color: green;
마진탑: 40px;
}
위 코드의 작동에서 볼 수 있듯이 두 번째 div 설정의 margin-top 은 효과가 없으며 첫 번째 div 설정의 margin-bottom 에서 작동합니다. 여기서 병합된 외부 거리의 높이가 외부 거리의 높이 중 큰 높이와 같다는 규칙이 있습니다. 따라서 이런 경우 외부 거리 크기 설정에 각별히 주의를 기울일 수 있습니다.
이유 2:
하위 요소와 상위 요소는 또한 코드 인스턴스
와 같이 설정된 하위 요소의 외부 경계를 무효화할 수 있습니다개미 부족
. father{
폭: 300px;
하이트: 300px;
Background-color: red;
마진탑: 20px;
}
. children{
폭: 100px;
하이트: 100px;
Background-color: blue;
마진탑: 10px;
}
해결 방법:
부모 객체에 적절한 외부 여백 방향으로 테두리 (border) 와 인세트 (padding) 가 있거나 overflow 속성 값을 hidden 으로 설정하면 피할 수 있습니다.
IE6 브라우저 아래에 외부 거리 병합 현상이 나타나지 않습니다.