此问题已在此处有答案：
Why does this CSS margin-top style not work?（14个答案）
两年前关闭。
我的css margins没有按照我想要或期望的方式运行。我看起来像我的标题margin-top影响了它周围的div-tags。
**这是我想要和期望的：**x1c 0d1x
...但这是我最终得到的：
来源：
<!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 将默认边距设置为10 px。不是很重要，重点是我不能、不应该、* 不想 * 更改h1标记上的边距。
我想这和我的另一个问题类似;* Why does this CSS margin-top style not work? *.问题是我如何解决这个特定问题？
我读过关于类似问题的a few threads，但没有找到任何真实的的答案和解决方案。我知道添加padding:1px;或border:1px;可以解决这个问题。但这只会增加新的问题，因为我不希望在我的div标签上有填充或边框。
必须有一个更好的、最好的做法、解决方案？这一定很常见。
7条答案
按热度按时间s3fp2yjn1#
将
overflow:auto添加到#pagediv。jsFiddle example
同时检查一下折叠的页边距。
u2nhd7ah2#
添加以下任一规则：
这是由
collapsing margins引起的。请参阅有关此行为的文章here。文章称：
W3C规范对折叠边距的定义如下：
在本说明书中，表达折叠边距意味着两个或更多个框（其可以彼此相邻或嵌套）的邻接边距（没有非空内容、填充或边界区域或间隙将它们分开）合并以形成单个边距。“
对于父子元素也是如此。
所有的答案都包括一种可能的解决方案：
在其他情况下，元素的边距不会折叠：
4bbkushb3#
问题是父母没有考虑到孩子的身高。添加
display:inline-block;为我做了。全CSS
See Fiddle
m3eecexj4#
只需将
border-top: 1px solid transparent;添加到#page元素。从 www.example.com
两个边距相邻，当且仅当：
sqyvllje5#
添加以下规则：
这是由折叠边距引起的。请参阅有关此行为的文章here。
文章称：
如果父元素没有任何顶部填充或顶部边距比它的第一个子元素少，则元素以使父元素看起来具有子元素的边距的方式呈现。因此，这可能发生在满足这些条件的页面上的任何地方，但它往往在页面顶部最明显。
h79rfbju6#
其他答案中的解决方案对我不起作用。透明边框、内联块等，都引起了其他问题。相反，我将以下css添加到我的祖先元素中：
根据您的情况，这可能会导致其自身的问题，因为它在最后一个子元素之后添加了额外的空间。
yptwkmov7#
我在为XenForo 2制作样式时的方法。1，但它应该对你有用：（请将这些LESS变量替换为您的实际值。此外，次要边距的绝对值应与前后伪元素的高度相同。）