CSS边缘恐怖; 边距在父元素之外添加空格我的css边距不符合我想要或期望的方式。我好像我的标题margin-top会影响它周围的div-tags。这就是我想要和期望的： ......但这就是我最终的结果： 资源：<!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标签上的边距。我想这跟我的其他问题类似; 为什么这种CSS margin-top风格不起作用？。问题是我该如何解决这个具体问题？我已经阅读了类似问题的几个主题，但没有找到任何真正的答案和解决方案。我知道添加padding:1px;或border:1px;解决问题。但这只会增加新的问题，因为我不希望在div标签上有填充或边框。必须有更好的最佳实践解决方案吗？这一定很常见。
4 回答
阿波罗的战车
TA贡献1862条经验 获得超6个赞
添加以下任一规则：
float: left/right;position: absolute;display: inline-block;overflow: auto/scroll/hidden;clear: left/right/both;
这是由collapsing margins。在此处查看有关此行为的文章。
根据这篇文章：
W3C规范定义了折叠边距如下：
“在本规范中，表达式折叠边距意味着两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容，填充或边框区域或间隙将它们分开）组合形成一个保证金。“
父子元素也是如此。
所有答案都包括一个可能的解决方案：
在其他情况下，元素的边距不会折叠：
浮动的元素
绝对定位的元素
内联块元素
溢出设置为除可见之外的任何元素（它们不会与子项一起折叠边距。）
已清除的元素（它们不会使用其父块的下边距折叠其顶部边距。）
根元素
添加回答
举报
0/150
提交
取消