this picture gördüğünüz gibi div yeşil içinde bir tane de portakal var hiç bir üst sınır ile div. Turuncu div 30px üst kenar boşluğu vardır, ama aynı zamanda div aşağı yeşil bastırıyor. Tabii ki, üst kenarlık ekleme sorunu çözecektir, ama YEŞİL div üst sınırsız olması lazım. Ne yapabilirdim ki?

html:

<div class="header">Top</div>
<div class="body">
    <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

css:

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

Teşekkürler

.body overflow:auto margin-yıkılmasını önlemek için ekleyebilirsiniz. http://www.w3.org/TR/CSS2/box.html#collapsing-margins bkz