Question

我的css边距不符合我想要或期望的方式。我好像我的标题margin-top会影响它周围的div标签。

这就是我想要和期待的： What I want....

...但这是我最终的结果： What I get...

来源：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>

我在这个例子中夸大了边缘。 h1-tag上的默认浏览器边距略小，在我的情况下，我使用 Twitter Bootstrap，使用Normalizer.css 将默认边距设置为10px。不重要，重点是;我不能，不应该，不希望更改h1标签上的边距。

我想这与我的其他问题类似; Why does this CSS margin-top style not work? 的。问题是如何解决这个具体问题？

我已经阅读了类似问题的a few threads，但没有找到任何真正的答案和解决方案。我知道添加padding:1px;或border:1px;可以解决问题。但这只会增加新的问题，因为我不希望在div标签上使用填充或边框。

必须有更好的最佳实践解决方案吗？这一定很常见。

Answer 1

将overflow:auto添加到您的#page div。

<强> jsFiddle example

当你在场时，请查看collapsing margins。

Answer 2

添加以下任一规则：

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;

这是由collapsing margins引起的。请参阅有关此行为的文章here。

根据文章：

W3C规范定义了折叠边距如下：

“在本规范中，表达式折叠边距意味着两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容，填充或边框区域或间隙将它们分开）结合形成一个边缘。“

对于父子元素也是如此。

所有答案都包含一个可能的解决方案：

在其他情况下，元素的边距不会崩溃：


浮动元素

绝对定位元素

内联块元素

将溢出设置为除可见之外的其他元素（它们不会与子项一起折叠边距。）

已清除的元素（它们不会使用其父块的下边距折叠其上边距。）

根元素

Answer 3

问题是父母没有考虑儿童身高。添加display:inline-block;为我做了。

完整CSS

#page {
    margin:0;
    background:#FF9;
    display:inline-block;
    width:100%;
}

See Fiddle

Answer 4

添加以下规则：

overflow: hidden;

这是由于页边距缩小造成的。请参阅有关此行为here的文章。

根据文章：

如果父元素的第一个子元素没有上边距或上边距少，则将以使父元素看起来具有子元素的边距的方式呈现元素。因此，这可能会在满足这些条件的页面上的任何地方发生，但在页面顶部时最明显。

Answer 5

只需将border-top: 1px solid transparent;添加到您的#page元素中即可。

Answer 6

#page {
overflow: hidden;
margin:0;
background:#FF9;
}

Answer 7

我为XenForo 2.1制作样式时的方法，但它对您应该有用：（请将这些LESS变量替换为您的实际值。此外，次边距的绝对值应与前后伪元素的高度相同。）

// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won't be float above the block border.)
&:before {content: "\a0"; display: block; width: auto; margin-bottom: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}
&:after {content: "\a0"; display: block; width: auto; margin-top: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall - @xf-borderSizeMinorFeature);}

Answer 8

其他答案中的解决方案对我不起作用。透明边框，内联块等均引起其他问题。相反，我在祖先元素中添加了以下css：

parent::after{
  content: "";
  display: inline-block;
  clear: both;
}

根据您的情况，这可能会导致自身的问题，因为它在最后一个子元素之后增加了额外的空间。

CSS边缘恐怖;边距在父元素之外添加空格

8 个答案: