爲什麼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

回答