CSS: Rand oben, wenn Eltern keinen Rand haben

Wie Sie in sehen könnenDieses BildIch habe eine Orangediv in einem grünendiv ohne oberen Rand. Die Orangediv hat ein30px oberen Rand, aber es drückt auch das Gründiv Nieder. Natürlich wird das Problem durch Hinzufügen eines oberen Rahmens behoben, aber ich benötige das Gründiv randlos sein. Was könnte ich tuen?

.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>

Vielen Dank

Antworten auf die Frage(7)

Ihre Antwort auf die Frage