CSS：当父母没有边框时，Margin-top [英] CSS: Margin-top when parent's got no border

问题描述

您可以在这张图片中看到，我有一个橙色 div 在没有顶部边框的绿色 div 内。橙色 div 有一个 30px 顶部边距，但它也推动绿色 code> down。当然，添加顶部边框将解决这个问题，但我需要绿色 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>顶部< / div>< div class =body> < div class =container> Box< / div>< / div>< div class =foot> Bottom< / div>   

感谢

解决方案

添加 overflow：auto 到 .body 以防止边缘崩溃。请参见 http://www.w3.org/TR/CSS2/box .html＃collapsing-margins

As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?

.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

解决方案

You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins

这篇关于CSS：当父母没有边框时，Margin-top的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！