Question

我正在学习Jon Duckett的书中的HTML和CSS，并且在第15章中遇到了固定布局示例的问题。我正在搞乱另一个并尝试完全理解这个布局。我的问题是我投入的新款似乎不尊重保证金：10px;规则（至少我认为它是保证金顶部）。

以下是我的例子：

JsFiddle

书中的示例：“固定宽度布局”：EXAMPLE

HTML

* {
    font-family: Arial, Verdana, sans-serif;
	color: #665544;
	text-align: center;
    }
    body {
    width: 960px;
    margin: 0 auto; /* top/bottom left/right*/
    }
    #content {
    overflow: auto;
    height: 100%;
    }
    #nav, #feature, #footer, #test /*This ID*/ {
    background-color: #efefef;
    margin: 10px;
    padding: 10px;
    }
    #article_column1, #article_column2, #article_column3 {
    float: left;
    width: 300px;
    margin: 10px;
    background-color: #efefef;
    }
    li {
    display: inline;
    padding: 5px;
    }
    a{
    text-decoration: none;
    }

<div id="header">
    <h1>Logo</h1>
    <div id="nav">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Product</a></li>
        <li><a href="">Service</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
     </div>
     </div>
    <div id="content">
    <div id="feature">
      <p>Feature</p>
    </div>
    <!--Problem Starts Here-->
    <div id="test">
      <p>Why is your margin-top so small?</p>
    </div>
    <!-- Problem Ends Here -->
    <div id="article_column1">
      <p>Column One</p>
    </div>
    <div id="article_column2">
      <p>Column Two</p>
    </div>
    <div id="article_column3">
      <p>Column Three</p>
    </div>
    </div>
    <div id="footer">
    <p>&copy; Copyright 2011</p>
    </div>

提前感谢您提供任何帮助

Answer 1

您正在处理＆＃34;保证金崩溃＆＃34;来自Mozilla Developer Network：

块的顶部和底部边距有时会合并（折叠）单个保证金，其大小是合并的最大边际进入它，一种称为边缘崩溃的行为。

<强>更新

覆盖此现象的最佳方法是在中间添加一个元素以打破折叠：

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

更新了 jsFiddle

固定布局上的边距损失

JsFiddle

1 个答案: