CSS：父级没有边框时的边距顶部

Posted 2023-03-06

【中文标题】CSS：父级没有边框时的边距顶部

【英文标题】：CSS: Margin-top when parent's got no border

【发布时间】：2010-11-26 13:18:20

【问题描述】：

正如您在this picture 中看到的，我在绿色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 像素的位置？

相关问题：***.com/questions/315738/…

可能更适合doctype.com

相关：clear and collapse fix.

【参考方案1】：

使用padding 代替margin：

.body .container 
    ...
    padding-top: 30px;

【参考方案2】：

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

【参考方案3】：

您阅读了这份文件： Box model - Margin collapsing

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%;

【参考方案4】：

您所经历的是边距折叠。边距不指定元素周围的区域，而是指定元素之间的最小距离。

由于绿色容器没有任何边框或内边距，因此没有任何内容可以包含橙色元素的边距。顶部元素和橙色元素之间使用边距，就像绿色容器具有边距一样。

在绿色容器中使用内边距，而不是在橙色元素上使用边距。

【参考方案5】：

您可以将overflow:auto 添加到.body 以防止边距折叠。见http://www.w3.org/TR/CSS2/box.html#collapsing-margins

【讨论】：

哇，刚刚让我免于因边缘消失而发疯！

默认设置边距折叠似乎是一件奇怪的事情，有人有一个很好的例子说明你什么时候想使用它吗？

关于边距折叠的好文档：developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

【参考方案6】：

不知道这听起来有多骇人听闻，但是添加一个透明边框怎么样？

【参考方案7】：

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

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

#element 被下推，因为它的第一个子元素有一个 margin-top: 30px。有了这个 CSS，它现在可以按预期工作了 :) 不确定它是否适用于所有情况，YMMV。