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

<div class="block1">
    <div class="block2"></div>
</div>
.block1 { width: 500px; }
.block2 { height: 300px; }

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

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

Элементы HTML страницы делятся на блочные и строчные. Порядок отображения элементов на странице называется потоком документа. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются слева направо и сверху вниз и при необходимости переносятся на новую строку.

Строчные элементы предназначены для оформления текста на уровне небольших фраз и отдельных слов. Блочные же элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.

1. Блочные элементы display:block

1. Блочные элементы занимают 100% доступного пространства по ширине.
2. Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.
3. До и после блочного элемента существует перенос строки.

К блочным элементам относятся: <div>, <p>, <h1>, <h2>,<ul> и т.д.