CSS 여백 백분율이 항상 포함 블록의 너비를 기준으로 하는 이유는 무엇입니까?

CSS의 여백/패딩 백분율 이해

CSS에서 상자 모델은 포함 블록의 크기를 기준으로 여백과 패딩을 계산하는 방법을 정의합니다. . CSS 사양에 따르면 여백 비율은 항상 포함 블록의 너비를 기준으로 계산됩니다. 이 동작은 위쪽 및 아래쪽 여백 모두로 확장됩니다.

이 결정의 근거는 불분명하지만 추측에 따르면 상위 요소 높이 계산과의 충돌 가능성을 방지하기 위해 만들어진 것으로 보입니다. 패딩 비율이 높이를 기준으로 한 경우 상위 요소의 높이에 영향을 미치며 그 반대의 경우도 마찬가지입니다. 이로 인해 높이 재계산의 무한 루프 또는 부정확한 높이 값이 발생할 수 있습니다.

이 동작을 이해하려면 실제 예를 고려하십시오.

<div>

예상대로 내부 div의 상단 및 왼쪽 여백은 둘 다 외부 div 너비(20px)의 10%입니다. 그러나 여백 백분율이 높이를 기반으로 하는 경우 내부 div의 상단 여백은 80px가 되며 이는 상위의 지정된 높이인 800px과 충돌합니다.

폭에 대해 계산된 여백 백분율은 일부 시나리오에서 직관에 어긋나는 것처럼 보일 수 있지만 CSS 상자 모델의 일관성을 유지하고 잠재적인 높이 계산 문제를 방지합니다.

위 내용은 CSS 여백 백분율이 항상 포함 블록의 너비를 기준으로 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!