Html CSS边距恐怖；边距在父元素之外添加空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13573653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS margin terror; Margin adds space outside parent element
提问by jamietelin
My css margins doesn't behave the way I want or expect them to. I seems like my header margin-top affect the div-tags surrounding it.
我的 css 边距不符合我想要或期望的方式。我的标题 margin-top 似乎影响了它周围的 div 标签。
This is what I want and expect:
这就是我想要和期望的：
...but this is what I end up with:
……但这就是我的结局：
Source:
来源：
<!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>
I have exaggerated the margin in this example. Default browser margin on h1-tag is somewhat smaller, and in my case I use Twitter Bootstrap, with Normalizer.csswhich sets default margin to 10px. Not that important, main point is; I can not, should not, want notchange the margin on the h1-tag.
在这个例子中，我夸大了边距。h1-tag 上的默认浏览器边距稍小，在我的情况下，我使用Twitter Bootstrap，Normalizer.css将默认边距设置为 10px。没那么重要，重点是；我不能，不应该，不想改变 h1-tag 上的边距。
I guess it is similar to my other question; Why does this CSS margin-top style not work?. Question is how do I solve this specific issue?
我想这类似于我的另一个问题；为什么这个 CSS margin-top 样式不起作用？. 问题是我如何解决这个特定问题？
I have read a few threadson similar problems, but haven't found any real answers and solutions. I know adding padding:1px;or border:1px;solves the problem. But that only adds new problems, since I do not want a padding nor a border on my div-tags.
我已经阅读了一些关于类似问题的帖子，但还没有找到任何真正的答案和解决方案。我知道添加padding:1px;或border:1px;解决问题。但这只会增加新的问题，因为我不想要我的 div 标签上的填充或边框。
There must be a better, best practice, solution? This must be pretty common.
必须有更好的最佳实践解决方案吗？这应该是很常见的。
回答by j08691
Add overflow:autoto your #pagediv.
添加overflow:auto到您的#pagediv。
And check out collapsing marginswhile you're at it.
并在您使用时查看折叠边距。
回答by Ziarno
Add any one of the following rules:
添加以下任一规则：
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
This is caused by collapsing margins. See an article about this behavior here.
这是由collapsing margins. 请在此处查看有关此行为的文章。
According to the article:
根据这篇文章：
The W3C specification defines collapsing margins as follows:
“In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.”
W3C 规范定义折叠边距如下：
“在本规范中，折叠边距的表达意味着两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容、填充或边界区域，或间隙将它们分开）组合形成一个边距。”
This is also true for parent-child elements.
对于父子元素也是如此。
All the answers include one of the possible solutions:
所有答案都包括可能的解决方案之一：
There are other situations where elements do not have their margins collapsed:
- floated elements
- absolutely positioned elements
- inline-block elements
- elements with overflow set to anything other than visible (They do not collapse margins with their children.)
- cleared elements (They do not collapse their top margins with their parent block's bottom margin.)
- the root element
还有其他情况，元素的边距没有折叠：
- 浮动元素
- 绝对定位元素
- 内联块元素
- 溢出设置为可见以外的任何元素（它们不会与其子元素折叠边距。）
- 已清除的元素（它们不会用父块的底部边距折叠顶部边距。）
- 根元素
回答by jonBreizh
Problem was the parent not taking into account children for height. Adding display:inline-block;did it for me.
问题是父母没有考虑孩子的身高。添加display:inline-block;为我做了。
Full CSS
完整的 CSS
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
回答by Amid
Just add border-top: 1px solid transparent;to your #pageelement.
只需添加border-top: 1px solid transparent;到您的#page元素。
Two margins are adjoining if and only if:
- no line boxes, no clearance, no padding and no border separate them
两个边距相邻当且仅当：
- 没有行框、没有间隙、没有填充和没有边框将它们分开
回答by nahid
Add the following rule:
添加以下规则：
overflow: hidden;
This is caused by collapsing margins. See an article about this behavior here.
这是由边距折叠引起的。请在此处查看有关此行为的文章。
According to the article:
根据这篇文章：
If a parent element does not have any top padding or less top margin then its first child, then elements are rendered in a way that makes the parent element appear to have the child element's margin. So this can happen anywhere on a page where these conditions are met, but it tends to be most obvious at the top of a page.
如果父元素没有任何顶部填充或比其第一个子元素的顶部边距少，则元素的渲染方式使父元素看起来具有子元素的边距。因此，这可能发生在满足这些条件的页面上的任何位置，但在页面顶部往往最明显。
回答by Romil Jain
#page {
overflow: hidden;
margin:0;
background:#FF9;
}
回答by Shiki Suen
My approach when I was making styles for XenForo 2.1, but it should be useful for you: (Please replace those LESS variables to your actual values. Also, the absolute value of minor margins shall be as same as the height of before-after pseudo elements.)
我在为 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);}
回答by Trevor
The solutions in the other answers didn't work for me. Transparent borders, inline-block, etc., all caused other problems. Instead, I added the following css to my ancestor element:
其他答案中的解决方案对我不起作用。透明边框、inline-block 等，都造成了其他问题。相反，我将以下 css 添加到我的祖先元素中：
parent::after{
content: "";
display: inline-block;
clear: both;
}
Depending on your situation, this may cause its own problems because it adds extra space after the last child element.
根据您的情况，这可能会导致其自身的问题，因为它会在最后一个子元素之后添加额外的空间。
