CSS: margem superior quando os pais não têm fronteira
Como você pode ver emesta imagemEu tenho uma laranjadiv
dentro de um verdediv
sem borda superior. A laranjadiv
tem um30px
margem superior, mas também está empurrando o verdediv
baixa. Claro, adicionar uma borda superior corrigirá o problema, mas eu preciso do verdediv
para ser top sem fronteiras. O que eu poderia fazer?
.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>
obrigado