Question

在我开始一个新项目之前，我以为我正在理解盒子模型。这是一个精简的例子。发生的事情是在菜单下面是内容div所在的位置。当我设置#content margin-top：40px时，它不会向下移动40px。在萤火虫中我可以看到它增加了边距，但是它显示黄色的边距向上移动到菜单区域。我假设通过添加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>

Answer 1

我很确定如果你向#content添加一个浮点数，它应该向下移动40px，但我没有测试它。

Answer 2

如果填充比margin更好，那么使用填充不会造成太大的伤害。

我在示例标记中看到了这种行为，直到我在<div id="menu">中添加了一个小文本，以使其不为空，然后保证金完全按预期工作。

另一种可能的解决方法是在div上设置最小高度，但我还没有测试过。

了解箱子模型

2 个答案: