Question

w3c规范声明

％指定包含元素宽度百分比的边距

我想知道这是否也适用于垂直边距。最初我认为它没有，但我有一个容器div使用绝对位置和一个包含div使用静态位置。包含div的垂直边距正好是宽度html 而不是容器div，除非我将包含的div的位置也改为绝对值。因此，我想知道边距是否受文档布局的影响，是否仅占用包含元素的宽度。

更新

更改div2的位置会改变大小。

CSS：

body {
  height:100%;
}

div {
}

#div1
{
  height: 50%;
  background: #333;
  padding:1px;
}

#div2
{
background-color:#000;
height:50%;
//position:static;
position:absolute;
margin:25%;
}

HTML： <div id="div1"><div id ="div2">this</div> </div>

Answer 1

在CSS中，margin s的百分比值（垂直和水平边距以及padding百分比值）总是相对于元素包含框的宽度。作为参考，您可以在 CSS2.1 规范中查看此段落：little link。

我希望有所帮助！

Answer 2

是的，即使它看似违反直觉，垂直百分比边距也相对于包含元素的宽度，而不是高度。

Answer 3

是。起初看起来可能很奇怪，但它有两个明显的原因：

如果你给水平和垂直边距提供相同的百分比，它会更像你想要的东西。
如果内容在元素内流动，并且容器随之扩展，那么垂直边距取决于垂直尺寸会使其依赖于某些东西，而这又取决于垂直边距的大小！

Answer 4

CSS 2.1规范说about margin：“百分比：引用包含块的宽度”（块，而不是元素）。 containing block的定义有特殊规则，但绝对定位的容器仍然定义（通过其边缘）静态定位子项的包含块，并且我的测试符合这一点。如果您的测试另有建议，请发布您的示例代码。

保证金属性％

4 个答案: