为什么div的高度是保证金大小的一半

当div的高度通过百分比指定且边距相同时，边距是高度的两倍。这使高度值的一半的边距看起来相同。为什么是这样？为什么div的高度是保证金大小的一半

.test { 
 
    height: 5%; 
 
    margin-top: 2.5%; 
 
    outline: black solid 1px; 
 
}

<div class="test">Test 1</div>

您的div不会使用百分比高度，除非它的父div具有指定的高度。在你的例子中，没有5％的高度显示，因为它没有任何相关的基础。 – Lee

嘿，我的浏览器显示它，因为我打算JSFiddle不会。指定5％而不使用诸如视口之类的东西的最佳方式是什么（仅仅为了避免处理滚动条）？ –

视口不会影响你的身高，我不明白你想要做什么。为什么你需要使用百分比高度值？ – Lee

这是它是如何在规范中定义的，您使用的百分比不是基于同一来源：

的比例相对于计算的宽度生成的框的包含块。请注意，'margin-top'和'margin-bottom'也是如此。

所以，如果你设置任何保证金为百分比，它会涉及到父母的宽度而不是高度：

div { 
 
    width: 200px; 
 
    height: 5px; 
 
    background: crimson; 
 
    margin-top: 25%; 
 
}

<div></div>

正如评论中提到的那样，在这里使用视口单元将是最好的选择。

2015-10-19 17:27:58 Shikkediel

回答