지정된 여백 값이 있는 HTML 요소가 다른 컨테이너 요소 내에 자리잡으면 상위 요소가 다음을 기대할 수 있습니다. 일관되게 여백을 감싸십시오. 그러나 이러한 기대가 항상 충족되는 것은 아닙니다. 테두리, 위치 또는 오버플로 설정과 같은 상위 컨테이너의 특정 특성에 따라 여백이 포함되는지 여부가 결정되는 놀라운 동작이 나타납니다.
이 이상한 동작으로 인해 몇 가지 질문이 제기되었습니다.
미스터리를 풀기 위해 CSS의 깊이와 여백 상호 작용의 복잡성을 자세히 살펴보겠습니다.
실험을 통해 여러 CSS 속성이 여백 억제에 영향을 줄 수 있다는 것이 관찰되었습니다:
흥미롭게도 이러한 트리거는 여백 속성과 직접적인 관련이 없습니다. 예를 들어, 실선 테두리는 여백 억제에 영향을 미칠 가능성이 거의 없어 보입니다.
CSS 여백에 대한 W3C 사양 페이지를 자세히 살펴보면 명확한 내용을 찾을 수 있을 것으로 예상됩니다. 이 수수께끼 같은 행동에 대한 설명. 그러나 놀랍게도 사양에서는 관찰된 동작에 대한 명시적인 정의를 제공하지 않습니다.
더 자세히 살펴보면 사양에서 두 가지 개념이 결합되어 있음을 알 수 있습니다.
이 수수께끼의 혼합은 모호함을 만들어내고 혼란.
마진 포함의 논리를 이해하려면 CSS 사양의 "여백 축소" 섹션을 참조해야 합니다.
"If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it."
이는 하위 요소의 위쪽 및 아래쪽 여백이 서로 닿거나 겹치는 경우 단일 여백이 된다는 의미입니다. 그런 다음 요소의 위치는 축소 여백에 있는 다른 요소와의 관계에 따라 달라집니다.
본질적으로 여백을 포함하는 것은 "일반 div"의 기본 동작과 관련이 없습니다. 대신 여백, 테두리, 위치 지정 및 오버플로 설정의 상호 작용에 따라 달라집니다.
마진 억제의 수수께끼가 풀리면서 일관되지 않은 것처럼 보이는 동작이 마진 붕괴의 복잡한 규칙. CSS 사양에 명확한 문서가 없기 때문에 혼란이 발생했으며, CSS의 복잡한 측면의 미묘한 차이를 완전히 파악하려면 광범위한 테스트와 실험이 필요했습니다.
위 내용은 여백이 상위 요소 속성에 따라 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
