CSS의 너비를 기준으로 여백 상단 백분율이 계산되는 이유는 무엇입니까?

CSS에서 여백 상단 백분율은 어떻게 계산되나요?

상위 컨테이너 내의 하위 요소에 여백 상단 백분율을 적용할 때, 백분율이 계산되는 방식을 이해하는 것이 중요합니다. 백분율 여백은 높이가 아닌 포함 블록의 너비를 기준으로 합니다.

W3C 사양

W3C 사양에 따르면 여백 상단 백분율은 다음과 같이 계산됩니다. 포함 블록의 높이가 아닌 너비를 기준으로 합니다. 이렇게 하면 가로 및 세로 여백 간의 일관성이 보장되고 요소 높이를 계산할 때 순환 종속성이 방지됩니다.

너비 기반 여백 계산 이유

기본으로 두 가지 이유가 있습니다. 포함 블록 너비에 따른 수직 여백:

• 수평 및 수직 일관성: 여백-상단 및 여백-하단 백분율은 여백-왼쪽 및 여백과 관련하여 일관되게 동작해야 합니다. -너비를 기준으로 한 올바른 백분율.
• 순환 의존성 방지: 블록의 높이는 일반적으로 내용에 따라 결정되며 내용은 위쪽 및 아래쪽 여백에 따라 결정됩니다. 너비를 기준으로 수직 여백을 설정하면 이러한 순환 종속성이 깨지고 논리적 페이지 레이아웃이 허용됩니다.

예

높이가 있는 상위 컨테이너가 있는 시나리오를 고려해 보겠습니다. 100px, 너비 500px, margin-top: 50%인 하위 요소. 여백 상단 비율은 컨테이너 너비(500px의 50%)를 기준으로 계산됩니다. 따라서 margin-top은 너비의 절반인 250px이 됩니다.

코드 예

다음 CSS는 margin-top을 50%로 설정한 효과를 보여줍니다. 너비 기반 컨테이너:

<code class="css">.container {
  background: lightblue;
  padding: 10px;
  height: 100px;
  width: 500px;
}

p {
  display: block;
  border: 1px solid red;
  margin-top: 50%;
}</code>

이 예에서 하위 요소의 여백 상단은 250px이며, 이는 컨테이너 너비 500px의 50%로 계산됩니다.

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