当通过百分比指定div的高度且边距相同时，边距是高度大小的两倍。这使得高度值的一半的边距看起来相同。这是为什么？
.test {
height: 5%;
margin-top: 2.5%;
outline: black solid 1px;
}<div class="test">Test 1</div>
答案 0 :(得分：1)
这是它在规范中定义的方式，您使用的百分比不是基于相同的来源：
百分比是根据生成的包含块的宽度计算的。请注意，对于＆＃39; margin-top＆＃39;和＆＃39; margin-bottom＆＃39;同样。
http://www.w3.org/TR/CSS2/box.html#margin-properties
因此，如果您将任何边距设置为百分比，则它将与父级的宽度相关，而不是高度：
div {
width: 200px;
height: 5px;
background: crimson;
margin-top: 25%;
}<div></div>
正如评论中所提到的，使用视口单元将是最佳选择。