내 'margin-top' 비율이 컨테이너를 초과하는 이유는 무엇입니까?

여백 상단 백분율 계산: 너비 기반 접근 방식 이해

CSS에서 여백 상단을 포함한 수직 여백은 다음을 기준으로 계산됩니다. 포함 블록의 너비입니다. 이 접근 방식은 여백 측정 시 수평 및 수직 일관성을 보장하고 콘텐츠를 배치하는 동안 순환 종속성을 방지합니다.

수평 및 수직 일관성:

약식 여백 속성을 사용하면 다음을 설정할 수 있습니다. 네 면 모두에 여백이 있습니다. 세로 여백이 너비가 아닌 높이를 기반으로 하는 경우 서로 다른 측면의 여백은 크기가 다른 경우가 많아 일관된 동작을 깨뜨립니다.

순환 종속성 방지:

CSS 레이아웃 콘텐츠를 수직 블록으로 출력합니다. 블록의 너비는 일반적으로 상위 블록의 너비에 따라 결정됩니다. 그러나 블록의 높이는 내용에 따라 다르며 동적으로 변경될 수 있습니다. 세로 여백이 높이에 따라 달라지는 경우 상위 요소의 높이와 하위 요소의 여백 사이에 순환 종속성이 발생합니다.

예:

하위 요소가 있는 다음 코드를 고려하세요. 마진 최고: 50%:

<div class="container">
  <p>Some Cool Content</p> 
 
</div>

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

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

반대 하위 요소가 컨테이너 상단(100px)보다 50% 아래에 있을 것으로 예상하면 컨테이너 높이가 오버플로됩니다. 이는 마진율이 컨테이너의 높이가 아닌 너비를 기준으로 하기 때문입니다. 이 예에서 컨테이너의 너비는 500px이므로 여백 상단은 250px입니다.

결론적으로 세로 여백 계산은 일관성을 보장하고 순환 종속성을 방지하며 효율적인 레이아웃을 가능하게 하기 위해 포함하는 블록의 너비를 기반으로 합니다. 공사중입니다.

위 내용은 내 'margin-top' 비율이 컨테이너를 초과하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!