CSS 여백과 패딩 비율이 높이가 아닌 너비를 기준으로 하는 이유는 무엇입니까?

CSS의 여백/패딩 백분율이 너비에 묶여 있는 이유

CSS 상자 모델은 여백 및 패딩 백분율이 너비에 대해 계산되도록 정의합니다. 포함하는 블록의 이러한 특이한 동작은 그 근거에 대한 의문을 불러일으켰습니다.

CSS 박스 모델 사양에서 발췌

"[마진] 비율은 너비를 기준으로 계산됩니다. 생성된 상자의 포함 블록은 'margin-top' 및 'margin-bottom'에 해당됩니다. 글쎄요."

추론에 대한 추측

제한 요인으로 부모 키에 미치는 영향

근거 없는 추측은 다음과 같습니다. 결정은 높이 계산에 대한 우려에서 비롯되었을 수 있습니다. 요소 높이는 일반적으로 하위 항목의 높이로 정의됩니다. padding-top이 상위 높이에 대한 백분율로 적용되면 상위 높이에 영향을 줍니다. 그러나 자식의 키는 부모의 키에 따라 달라지며 그 반대의 경우도 마찬가지이므로 종속성 루프가 발생하거나 부정확한 높이 계산이 발생합니다.

중첩 시나리오 고려 사항

이것은 부모의 키가 아이의 키에 의존하고, 아이의 키가 부모의 키에 의존하는 경우에는 특히 우려가 필요합니다. (예: 오프셋 상위 === 상위) 종속성 루프 또는 무한 계산으로 인해 이러한 사례를 해결하는 것이 어려워집니다.

예

다음 코드 조각을 고려하세요.

<div>

여기서 예를 들어 내부 div의 상단 여백은 상위 div 너비(200px)의 10%로 계산됩니다. 20px 여백으로.

위 내용은 CSS 여백과 패딩 비율이 높이가 아닌 너비를 기준으로 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!