CSS边缘奇怪的行为,为什么？

Question

CSS边缘奇怪的行为,为什么？

拥有以下HTML

<!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>

Run Code Online (Sandbox Code Playgroud)

这两个DIV之间的空间只有10个像素.

为什么？请解释.

Answer 1

Gum*_*mbo 6

这种行为称为折叠边距.不添加边距值,但使用更高的值:

某些框之间的垂直边距可能会崩溃:

正常流动中的两个或多个相邻的块箱垂直边缘坍塌.得到的边距宽度是相邻边距宽度的最大值.[...]

[...]

归档时间：	16 年，9 月前
查看次数：	783 次
最近记录：	16 年，9 月前