margin屬性％

％，在含元件的寬度的百分比指定餘量

我想知道，這也適用於垂直邊緣。最初我以爲它沒有，但我有一個使用絕對位置的容器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>

來源

2012-08-26 Preom

在CSS中，的margin S（垂直和水平邊緣 - 以及padding百分比值）百分比值總是計算出相對於元件的容納箱的寬度。作爲參考，您可以看看CSS2.1規範中的這一段：little link。

我希望有幫助！

來源

2012-08-26 19:30:21 Chris

是的，儘管它可能看起來違反直覺，垂直百分比邊緣是相對於包含元素的寬度，而不是身高。

來源

2012-08-26 19:29:48

是的。這初看起來很奇怪，但它有兩個懂事的原因：

這使得它更像是你是什麼可能會想，你應該給的水平和垂直邊距相同的百分比。
如果內容在元素中流動，並且容器隨之膨脹，那麼具有垂直邊距取決於垂直尺寸將使其依賴於某種依賴於垂直邊緣尺寸的東西！

來源

2012-08-26 19:42:01

CSS 2.1規範說about margin：「百分比：指包含塊的寬度」（塊，而不是元素）。 containing block的定義有特殊的規則，但絕對定位的容器仍然定義（通過其邊緣）靜態定位的孩子的包含塊，我的測試符合這一點。如果您的測試有其他建議，請發佈您的示例代碼。

來源

2012-08-26 19:44:31

我用一些代碼更新了我的帖子，如果div2的位置發生變化，其邊距也會改變。我使用chrome os中的檢查功能驗證了這一點，並使用了一個css沙盒 – Preom

在您的代碼中，與描述相反，內部'div'是絕對定位的。 CSS 2.1規範規定，對於一個絕對定位的元素，包含塊是最接近的*定位的祖先，在這種情況下是'body'元素。 –

回答

相關問題