保证金最高百分比是如何计算的？

Posted 2023-03-05

【中文标题】保证金最高百分比是如何计算的？

【英文标题】：How is the margin-top percentage calculated?

【发布时间】：2016-04-14 20:32:06

【问题描述】：

我知道这应该很简单，但是谁能告诉我为什么当 margin-top: 50% 应用于孩子时，下面的子框会溢出其父容器。

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


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

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

不应该将子元素放置在距离 200px 50%（在父元素上设置高度），即距离顶部 100px 处吗？

【问题讨论】：

那是因为保证金margin-top:50%;

我知道这是因为margin-top:50%，但为什么呢？子元素不应该放置在距离 200px 的 50% 处（在父元素上设置高度），即距离顶部 100px 吗？

显示：内联块；

伙计们，我正在寻找解释。所有这些修复都可以由我自己完成，但是我需要解释为什么 margin-top:50% 不是根据父级的设定高度计算的。

【参考方案1】：

如果你想设置高度百分比，试试 'vh'..

   margin-top: 5vh; /* should be 5% of vertical container */

讨论here

【讨论】：

原来确实有解决办法，为什么之前没人提呢？新标准？

vh 单位基于视口高度，而不是容器高度。

【参考方案2】：

来自W3C Spec：

百分比是根据生成框的包含块的宽度计算的。请注意，“margin-top”和“margin-bottom”也是如此。如果包含块的宽度取决于此元素，则结果布局在 CSS 2.1 中未定义。

垂直边距基于包含块的宽度有两个很好的理由：

水平和垂直一致性

当然，有一个速记属性可以让您指定块的所有四个边的边距：

margin: 10%;

这扩展为：

margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;

现在，如果您写了以上任何一个，您可能希望块的所有四个边的边距大小相同，不是吗？但是如果 margin-left 和 margin-right 是基于容器的宽度，而 margin-top 和 margin-bottom 是基于容器的高度，那么它们通常是不同的！

避免循环依赖

CSS 将内容放置在垂直堆叠在页面下方的块中，因此块的宽度通常完全由其父级的宽度决定。换句话说，你可以计算一个块的宽度，而不用担心那个块里面有什么。

块的高度是另一回事。通常，高度取决于其内容的组合高度。改变内容的高度，你就改变了块的高度。看到问题了吗？

要获取内容的高度，您需要知道应用于它的顶部和底部边距。如果这些边距取决于父块的高度，那么您就有麻烦了，因为您无法在不知道另一个的情况下计算一个！

基于容器宽度的垂直边距打破了这种循环依赖，并使页面布局成为可能。

示例：

Here is the fiddle。和代码：

HTML

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

</div>

<p>
  MORE TEXT
</p>

CSS

.container 
  background: lightblue;
  padding: 10px;
  height: 100px;
  width: 500px;


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

JS

window.onload = function(evt) 

  var element = document.getElementById("element"),
    style = element.currentStyle || window.getComputedStyle(element);

  element.textContent = "the margin-top is : " + style.marginTop;
;

【参考方案3】：

使用父容器的宽度计算基于百分比的边距，无论边距位于哪一侧。

所以您看到的上边距等于宽度的 50%。

【讨论】：

哦，真的，这对我来说是个新闻。关于为什么这种行为的任何合乎逻辑的解释都可能是一个很好的例子。