CSS 中的 margin-top 百分比是如何计算的？

CSS 中的 margin-top 百分比计算

计算 CSS 中的 margin-top 百分比需要理解其参考点。与直观的假设不同，它不是根据父级的高度而是根据其宽度来计算的。

深入研究 W3C 规范

W3C 规范明确指出，“百分比是计算出来的相对于生成的盒子的包含块的宽度。”这对于 margin-top 和 margin-bottom 都适用。

确保一致性并避免循环依赖

所有边上基于百分比的边距（margin-top，- right、-bottom、-left）提供布局的一致性。对水平和垂直边距使用百分比可以避免边距大小的差异。

此外，基于容器宽度的垂直边距可以避免页面布局中的循环依赖。块高度取决于其内容，而内容高度需要包括顶部和底部边距的计算。通过将垂直边距锚定到容器宽度，这种依赖性被打破，从而实现有效的布局。

代码示例

.container {<br>背景：浅蓝色;<br> 内边距：10px；<br> 高度：100px；<br> 宽度：500px；<br>}<p>p {<br> 显示：块；<br> 边框：1px 纯红色； <br> margin-top: 50%;<br>}<br>

执行时，margin-top 是相对于容器的 500px 宽度进行测量的，从而产生 250px 的边距.

以上是CSS 中的 margin-top 百分比是如何计算的？的详细内容。更多信息请关注PHP中文网其他相关文章！