CSS：当父母无国界时的边际收益

Question

正如您在这张图片中看到的，我在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>

Answer 1

不知道这是否适合您的情况，但是我只是使用以下CSS属性解决了此问题#element {&nbsp; &nbsp; padding-top: 1px;&nbsp; &nbsp; margin-top: -1px;}#element被下推，因为它的第一个子元素具有margin-top: 30px。使用此CSS，它现在可以按预期的方式工作：）不确定是否适用于每种情况，YMMV。