CSS에서 여백 상단 비율은 어떻게 계산됩니까?

CSS에서 여백 상단 백분율 계산

CSS에서 여백 상단 백분율을 계산하려면 기준점을 이해해야 합니다. 직관적인 가정과 달리 부모의 높이가 아닌 너비로 계산됩니다.

W3C 사양 살펴보기

W3C 사양에는 "백분율은 계산됩니다. 생성된 상자의 포함 블록 너비와 관련하여." 이는 margin-top과 margin-bottom 모두에 해당됩니다.

일관성 보장 및 순환 종속성 방지

모든 측면에서 백분율 기반 여백(margin-top, - right, -bottom, -left) 레이아웃의 일관성을 제공합니다. 가로 및 세로 여백 모두에 백분율을 활용하면 여백 크기의 차이를 피할 수 있습니다.

또한 컨테이너 너비를 기반으로 하는 세로 여백은 페이지 레이아웃의 순환 종속성을 방지합니다. 블록 높이는 콘텐츠에 따라 달라지지만 콘텐츠 높이는 위쪽 및 아래쪽 여백을 포함하는 계산이 필요합니다. 세로 여백을 컨테이너 너비에 고정하면 이러한 종속성이 깨져 효과적인 레이아웃이 가능해집니다.

코드 예

.container {<br> background: lightblue ;<br> 패딩: 10px;<br> 높이: 100px;<br> 너비: 500px;<br>}</p>
<p>p {<br> 디스플레이: 블록;<br> 테두리: 1px 단색 빨간색; <br> margin-top: 50%;<br>}<br>

실행 시 margin-top은 컨테이너의 500px 너비를 기준으로 측정되어 250px의 여백이 생성됩니다. .

위 내용은 CSS에서 여백 상단 비율은 어떻게 계산됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!