마진 최고 비율의 계산 과정은 무엇입니까?

Question

이것이 간단해야 한다는 것을 알고 있지만 margin-top: 50%가 적용될 때 다음 코드의 하위 요소가 상위 컨테이너의 경계를 넘어 확장되는 이유를 누구든지 말해 줄 수 있습니까? 마진 상한 비율은 어떻게 계산되나요?

으아악 으아악

자식 요소는 상위 요소 상단에서 200px(상위 요소에서 설정한 높이)의 50%, 즉 상단에서 100px가 되어야 하는 것 아닌가요?

Answer 1

퍼센트 기반 여백은 여백이 어느 쪽에 있는지에 관계없이 상위 컨테이너의 너비를 기준으로 계산됩니다.

그래서 보시는 것은 위쪽 여백이 너비의 50%와 같다는 것입니다.

Answer 2

W3C 사양에서:

수직 여백을 포함 블록의 너비에 따라 결정하는 두 가지 이유는 다음과 같습니다.

수평 및 수직 일관성

물론 블록의 네 면에 여백을 지정할 수 있는 단축 속성이 있습니다.

으아악

다음으로 확장됩니다.

으아악

위 내용을 작성했다면 아마도 블록의 네 면 모두에서 여백의 크기가 동일할 것이라고 예상했을 것입니다. 그렇죠? 그러나 margin-left와 margin-right가 컨테이너 너비를 기준으로 하고 margin-top과 margin-bottom이 높이를 기준으로 하는 경우 일반적으로 서로 다릅니다!

순환 종속성을 피하세요

CSS는 페이지에 수직으로 쌓인 블록에 콘텐츠를 배치하므로 블록의 너비는 일반적으로 상위 요소의 너비에 따라 완전히 결정됩니다. 즉, 블록 내부의 내용에 대해 걱정하지 않고 블록의 너비를 계산할 수 있습니다.

블록의 높이는 또 다른 문제입니다. 일반적으로 높이는 해당 내용의 높이를 합친 값으로 결정됩니다. 콘텐츠의 높이를 변경하면 블록의 높이도 변경됩니다. 문제가 보이나요?

콘텐츠의 높이를 얻으려면 콘텐츠에 적용된 위쪽 및 아래쪽 여백을 알아야 합니다. 이러한 여백이 상위 블록의 높이에 따라 달라지면 다른 블록을 모르고 하나를 계산할 수 없기 때문에 문제가 발생합니다!

컨테이너 너비에 따른 수직 여백은 이러한 순환 종속성을 깨고 페이지 레이아웃을 가능하게 합니다.

예:

예시입니다. 그리고 코드는:

HTML

으아악

CSS

으아악

JS

으아악