Q

CSS邊緣奇怪的行爲，爲什麼？

css
margins

2009-06-01 48 views 3 likes

3

那些具有兩個div之間下面CSS邊緣奇怪的行爲，爲什麼？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
    <div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div> 
    <div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div> 
</body> 
</html>

的空間中的HTML只有10個像素。

爲什麼？請解釋。

2009-06-01 Alin Vasile

A

回答

6

該行爲被稱爲collapsing margins。不添加餘量的值，但是使用更高的值：

垂直餘量可能某些框之間塌陷：的塊盒

兩個或更多個相鄰的垂直邊緣在正常流動崩潰。最終的邊距寬度是相鄰邊距寬度的最大值。 [...]

[...]

2009-06-01 19:02:13 Gumbo

+0

是否有辦法防止這種情況？我不喜歡這種行爲。 – 2009-06-01 19:06:51

+0

爲什麼不把值增加到20px？ – Gumbo 2009-06-01 19:12:39

1

這裏是一個很好。基本上，按照CSS規範和所有常識，似乎所有相鄰邊界都會相互崩潰。

2009-06-01 19:06:30 tghw

1

，如果你想擁有你可以使用「填充」，而不是預期的效果，利潤總是崩潰

2009-06-01 19:12:07 Rony

相關問題