Question

如果我有以下html：

<body>
    <div id="mainTop">
    </div>
    <div id="main">
        <h2>
            <%= Html.Encode(ViewData["Message"]) %></h2>
        <p>
            To learn more about ASP.NET MVC visit 
                http://asp.net/mvc</a>.
        </p>
    </div>
    <div id="mainBottom">
    </div>
</body>

使用以下CSS：

#mainTop
{
    background: url('/Content/Images/bg_top.png') no-repeat;
    width: 963px;   
    height: 65px;
    margin: 0 auto;
    text-align: left;
    color: #5d676d;
}

#main
{
    background: url('/Content/Images/bg_middle.png') repeat-y;
    width: 963px;   
    min-height: 50px;
    margin: 0 auto;
}

#mainBottom
{
    background: url('/Content/Images/bg_bottom2.png') no-repeat;
    width: 963px;   
    height: 128px;
    margin: 0 auto;
}

看起来像这样：

alt text

为什么某些标签如<p＆gt;标题标签会导致我的布局出现空白？理想情况下，我希望在我的内容之间没有那么大的空间。

Answer 1

默认情况下<p>和<h2>（以及其他）包含与其关联的边距和填充。尝试将以下内容添加到CSS中：

p, h2 {
  margin: 0px;
  padding: 0px;
}

填充不会影响元素的边框和背景，但根据您的需要，您可能希望尝试删除它们，就像我在这里一样。

编辑：在下面的答案中作为Guffa pointed out，段落和标题的边距到达其容器DIV之外的原因是collapsing margins.

Answer 2

为避免出现这种情况，请使用YUI Reset之类的内容。它将默认CSS设置为跨浏览器可预测的内容。

Answer 3

那是因为collapsing margins。边距不是围绕单个元素的东西，比如填充。相反，边距决定了元素之间的距离。如果父元素没有边距或填充（如代码中的div元素），则子元素的边距（h2和p）将确定父元素之间的距离，而不是子元素。

现在，当父元素具有背景集时，通常应该避免折叠边距，因为IE（至少版本7）不能正确处理折叠边距。

如果你只是在你的div元素上设置一些填充（看起来你应该有这个），边距不会在它们之外崩溃。

Answer 4

问题在于collapsing margins。 h1和p元素的边距有助于主div的边缘。您可以通过删除这些元素上的边距来解决此问题：

h1,p { margin: 0; }

或通过向div添加边框或填充：

#main { padding: 1px; }

另外，请确保您的HTML格式正确，样本中有一个迷路</a>。

Answer 5

在添加自己的CSS之前，您是否尝试过重置css？

Answer 6

我（通常）使用以下内容启动每个CSS文件，以避免被自动填充/边距捕获：

*
{
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 0;
}

为了清晰起见编辑：

*
{
   margin: 0;
   padding: 0;
}

做同样的事情。

为什么<p>和</p> <h1>元素会导致布局出现空白？</h1>

6 个答案: