여백 제한이 CSS의 Overflow: Auto에 의해 제어되는 것처럼 보이는 이유는 무엇입니까?

Margin Confinement: A Mystery Unveiled

여백이 있는 요소가 다른 요소 내에 중첩되면 상위 요소의 캡슐화 능력에 불일치가 발생합니다. 여백. border, position:absolute,display:inline-block,overflow:auto와 같은 다양한 CSS 속성은 부모가 자식의 여백을 포함하도록 트리거합니다. 그러나 이 동작의 이면에 있는 논리는 여전히 파악하기 어렵습니다.

처음에는 마진 붕괴를 중심으로 가정했습니다. 그러나 W3C 사양에서는 이 동작에 대한 명확한 설명을 제공하지 않으며 이 시나리오에서는 겹치는 여백이 없습니다. 그럼에도 불구하고 브라우저는 일관되게 동일한 동작을 보여줍니다.

이 문제의 핵심은 일반 div의 기본 동작이 여백이 상위 항목에 포함되지 않는다고 가정한다는 사실에 있습니다. 그러나 이 동작을 변경하는 다른 모든 CSS 속성은 여백이 포함되어야 함을 의미합니다. 이러한 불일치는 추가 조사가 필요합니다.

W3C 사양: 진실과 미스터리의 혼합

추가 조사를 통해 W3C 사양은 이러한 동작을 다루지만 일관되지 않은 설명을 제공합니다. . 사양에는 '여유 여백'(상위 경계를 넘어 확장되는 여백)과 '접힌 여백'(겹치는 인접 여백) 개념이 무심코 결합되어 있습니다.

이러한 합병으로 인해 개발자는 답변보다 더 많은 질문을 갖게 되었습니다. 이 경우 여유 여백은 Overflow: auto 속성의 영향을 받는 것으로 보입니다. 이는 일반적으로 Overflow가 여백이 아닌 요소의 내용을 제어한다는 점을 고려하면 직관에 반하는 것입니다.

실시간 데모

제공된 코드 조각에서 볼 수 있듯이 라이브 데모는 이 이상한 동작을 생생하게 보여줍니다. 여백(h2)이 있는 요소는 CSS 속성이 서로 다른 다양한 상위 요소 내에 중첩됩니다. 결과는 부모의 여백을 포함하는 능력이 겉으로 보기에 관련이 없는 트리거에 의해 어떻게 영향을 받는지 명확하게 보여줍니다.

이 수수께끼는 계속해서 개발자가 CSS 여백 포함 뒤에 숨은 논리를 해독하려고 시도할 때 머리를 긁게 만듭니다. 이 지속적인 미스터리를 해결하려면 W3C의 추가 조사와 설명이 필요할 수 있습니다.

위 내용은 여백 제한이 CSS의 Overflow: Auto에 의해 제어되는 것처럼 보이는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!