CSS의 여백 상단 백분율 계산

요소에 여백 상단 백분율을 적용할 때 계산 방법을 이해하는 것이 중요합니다. 수행. 일반적인 믿음과는 달리, 마진 상단 백분율은 높이가 아닌 포함 블록의 너비를 기준으로 결정됩니다.

W3C 사양 설명:

에 따르면 W3C 사양, "백분율은 생성된 상자의 포함 블록 너비를 기준으로 계산됩니다." 이 규칙은 'margin-top' 및 'margin-bottom' 모두에 적용됩니다.

컨테이너 너비에 수직 여백을 적용하는 이유:

1. 수평 및 수직 일관성: 블록의 네 면 모두에 대한 백분율 여백은 'margin' 단축 속성에 정의된 대로 동일하게 유지되어야 합니다. 컨테이너 너비를 기준으로 세로 여백을 설정하면 일관된 여백 크기가 유지됩니다.
2. 순환 종속성 방지: 블록 높이를 계산하려면 위쪽 및 아래쪽 여백을 이해해야 하는 경우가 많습니다. 그러나 이러한 여백이 블록 높이에 따라 달라지면 레이아웃 계산 중에 순환 종속성이 발생합니다. 컨테이너 너비에 따라 세로 여백을 설정하면 이 문제가 해결됩니다.

예:

다음 코드를 고려하세요.

.container {
  width: 500px;
  height: 100px;
}

p {
  margin-top: 50%;
}

'p' 요소의 'margin-top' 50%는 '.container' 너비(500px)를 기준으로 계산됩니다. 따라서 실제 적용되는 margin-top은 250px(500px의 50%)가 됩니다. 이는 100px(200px의 50%, '.container' 높이)라는 일반적인 가정과 다릅니다.

결론:

마진이 얼마나 되는지를 이해함으로써 -상위 비율이 계산되므로 요소 위치를 효과적으로 제어하고 예상치 못한 레이아웃 문제를 방지할 수 있습니다. 일관된 크기를 유지하고 CSS 레이아웃의 순환 종속성을 방지하기 위해 세로 여백은 포함 블록의 너비를 기반으로 한다는 점을 기억하세요.