CSS의 너비를 기준으로 margin-top이 계산되는 이유는 무엇입니까?

CSS의 여백 상단 백분율 계산

여백 상단의 백분율은 포함 블록의 너비를 기준으로 계산됩니다. 이는 컨테이너의 높이와 너비를 각각 기준으로 계산되는 세로 및 가로 여백과 다릅니다.

예:

다음 CSS 코드를 고려하세요.

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

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

이 예에서 하위 단락 요소의 여백 상단은 50%입니다. 백분율은 컨테이너 너비(500px)를 기준으로 계산됩니다. 따라서 단락은 컨테이너 상단에서 250px(500px의 50%)에 배치됩니다.

너비 기반 계산에 대한 추론:

두 가지 주요 이유가 있습니다. 포함 블록의 너비를 기준으로 수직 여백을 설정하는 경우:

• 수평 및 수직 일관성: 이렇게 하면 블록의 네 측면 모두의 여백이 동일한 크기로 유지됩니다. 단축 여백 속성을 사용합니다.
• 순환 종속성 방지: 높이 기반 수직 여백은 블록 높이와 내용 높이 사이에 순환 종속성을 생성하여 레이아웃 계산을 불가능하게 만듭니다.

동적 높이의 예:

너비 기반 세로 여백의 효과를 확인하려면 다음 코드를 고려하세요.

<code class="html"><div class="container">
  <p id="element"> Some Cool content</p>

</div>

<p>
  MORE TEXT
</p></code>

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

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

이 경우 단락 요소는 내용에 따라 동적 높이를 갖습니다. 50%의 여백 상단은 여전히 ​​단락 높이가 아닌 컨테이너 너비를 기준으로 계산됩니다. 이렇게 하면 내용에 관계없이 단락이 올바른 위치에 유지됩니다.

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