在我开始一个新元素之前，我认为我正在理解盒子模型。这是一个精简的例子。 菜单下方发生的事情是内容 div 所在的位置。当我设置#content margin-top:40px 时，它不会向下移动 40px。在 Firebug 中，我可以看到它添加了边距，但它以黄色显示边距向上移动到菜单区域。我假设通过添加 40px 的边距，它会将内容 div 从菜单中向下推 40px。如果我添加填充而不是边距，它会起作用。关于盒子模型，我有什么不明白的吗？
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div> <!-- Header Ends -->
<div id="menu">
</div> <!-- Menu Ends -->
<div id="content">
<div id="leftColumn">
<h2>Main title</h2>
<h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</h3>
<p>voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
<div id="centerColumn"></div>
<div id="rightColumn"></div>
</div>
</div> <!-- Wrapper Ends -->
</body>
</html>
最佳答案
我很确定如果你向#content 添加一个 float ，它应该向下移动 40px，但我没有测试它。
关于html - 理解盒子模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6388345/