CSS：当父母没有边框时的边距顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1394724/
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-top when parent's got no border
提问by Manny
As you can see in this picture, I've got an orange divinside a green divwith no top border. The orange divhas a 30pxtop margin, but it's also pushing the green divdown. Of course, adding a top border will fix the issue, but I need the green divto be top borderless. What could I do?
正如你在这张图片中看到的，我在没有顶部边框div的绿色里面有一个橙色div。橙色div有一个30px顶部边缘，但它也将绿色div向下推。当然，添加顶部边框可以解决问题，但我需要绿色div为顶部无边框。我能做什么？
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>Thanks
谢谢
回答by Fabian
You could add overflow:autoto .bodyto prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
您可以添加overflow:auto到.body以防止边距折叠。见http://www.w3.org/TR/CSS2/box.html#collapsing-margins
回答by Guffa
What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.
您所经历的是边缘崩溃。边距不指定元素周围的区域，而是指定元素之间的最小距离。
As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.
由于绿色容器没有任何边框或填充，因此没有任何内容可以包含橙色元素的边距。边距用于顶部元素和橙色元素之间，就像绿色容器有边距一样。
Use a padding in the green container instead of a margin on the orange element.
在绿色容器中使用填充而不是橙色元素上的边距。
回答by alex
Not sure if this will work in your case, but I just solved this with the following CSS properties
不确定这是否适用于您的情况，但我刚刚使用以下 CSS 属性解决了这个问题
#element {
padding-top: 1px;
margin-top: -1px;
}
#elementwas being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.
#element被推下是因为它的第一个子元素有一个margin-top: 30px. 使用此 CSS，它现在可以按预期工作 :) 不确定它是否适用于所有情况，YMMV。
回答by Tomas Aschan
Use paddinginstead of margin:
使用padding代替margin：
.body .container {
...
padding-top: 30px;
}
回答by Jonathan Patt
You can either add padding-top: 30on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.
您可以添加padding-top: 30绿色框，使用橙色框上的相对定位top: 30px，或者浮动橙色框并使用相同的margin-top: 30px.
回答by ranonE
You read this document: Box model - Margin collapsing
您阅读此文档： 盒模型 - 边距折叠
CSS
CSS
.body {
border: 1px solid black;
border-bottom: none;
border-top: none;
width: 120px;
height: 112px;
background-color: lightgreen;
padding-top: 30px;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
}
回答by finferflu
Not sure how hackish this sounds, but how about adding a transparent border?
不知道这听起来有多么骇人听闻，但是如何添加透明边框？
