logo标签列表

CSS：当父元素没有边框时，如何设置Margin-top

cssbordermargin
55

如您所见在这张图片中，我有一个橙色的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>

你能详细说明期望的效果吗？您是希望在橙色容器内的文本距离顶部出现30像素，还是希望橙色容器的顶部距离绿色容器的顶部下方30像素处？ - Mayo
相关问题：https://dev59.com/q0XRa4cB1Zd3GeqPvNpB - mercator
可能更适合在http://doctype.com/上。 - Nobody
相关：清除浮动并修复折叠。 - Qtax
7个回答
92
3
沃特，刚刚帮我解决了我的边距消失问题，真是太棒了！ - Andrew Bullock
3
我也遇到了同样的问题，这让我非常烦恼，因为我不想要边框。这个方法解决了我的问题，感谢提供信息，并且链接帮助解释了为什么会出现这种情况。 - jimplode
2
外边距折叠似乎是一个奇怪的默认设置，有人有什么好的例子可以使用它吗？ - opsb
1
关于外边距折叠的好文档：https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing - stevenw00
9
你所遇到的是边距折叠。边距并不指定元素周围的区域，而是元素之间的最小距离。
由于绿色容器没有任何边框或填充，因此没有任何东西来包含橙色元素的边距。该边距被用在顶部元素和橙色元素之间，就像绿色容器会有边距一样。
在绿色容器中使用填充而不是在橙色元素上使用边距。
1

使用 padding 代替 margin：

.body .container {
    ...
    padding-top: 30px;
}
1

不确定这是否适用于您的情况，但我刚刚使用以下CSS属性解决了这个问题

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element因为其第一个子元素有margin-top: 30px而被向下推。使用这个CSS后，它现在按照预期工作 :) 不确定它是否适用于每种情况，视情况而定。

0
你正在阅读这篇文档： 盒模型 - 边距折叠 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%;
}
0

不确定这听起来是否有些hackish，但是加一个透明边框怎么样？

0

你可以在绿色框上添加 padding-top: 30，在橙色框上使用相对定位并加上 top: 30px，或者将橙色框浮动并使用相同的 margin-top: 30px。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接