当我们在外部 div 上有边框时，我可以理解下面的第一个示例。 边距崩溃，所以我们只有 20 像素的边距。
但是第二个例子看起来很奇怪当我们只是
去除外层div的边框
/*Fist example */
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>"float: left" with no width set</title>
<style type="text/css" media="screen">
body
{
padding: 0;
margin:1px;
}
</style>
</head>
<body>
<div style="background-color: yellow; border: solid 1px #ccc;">
<div style="margin: 20px; background-color: red;">
<p style="margin: 20px; color:#fff; background-color: blue;">A paragraph
with a 20px margin inside a div, also with a 20px margin</p>
</div>
</div>
</body>
</html>
/* Secod example without a border on the outer div */
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>"float: left" with no width set</title>
<style type="text/css" media="screen">
body
{
padding: 0;
margin:1px;
}
</style>
</head>
<body>
<div style="background-color:yellow;">
<div style="margin: 20px; background-color: red;">
<p style="margin: 20px; color:#fff; background-color: blue;">
A paragraph with a 20px margin inside a div, also with a 20px margin
</p>
</div>
</div>
</body>
</html>
//Tony
最佳答案
两个边距相邻当且仅当......没有行框，没有间隙，没有填充，也没有边框将它们分开
关于html - 看不懂这个边距崩溃的例子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18243812/