HTML\CSS → Выпадение внешних отступов

Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.

Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим».

<div class="block-1">
    <div class="block-2">Блок 2</div>
        Блок 1
    </div>
...
// не сработает!
.block-2 { margin-top:20px; }

Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (padding) сверху или добавить рамку сверху.

.block1 { 
    padding-top: 1px;
    border: 1px solid black;
}

Также решением может быть добавление overflow:hiddenродителю.