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

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

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

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

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

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

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

За управление пробелами и перенос строк в CSS отвечает свойство white-space. Оно принимает значения:

normal — режим по умолчанию.
nowrap — отображает весь текст одной строкой без переносов;
pre — сохраняет пробелы и переносы как в исходном коде аналогично тэгу pre;
pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;

<h2>Заголовок с множеством   пробелов   и переносом!</h2>
h2 { white-space: pre-wrap; }

Свойство font-size — задает размер шрифта.

Единицы измерения для задания размеров шрифта:
Относительные единицы em — 1.5em
Пиксели px — 14px
Пункты pt — 14pt
Проценты % — 80%

Размер шрифта лучше всего задавать в em — относительной единице измерения. 1em обычно равен длине буквы «M» в данном шрифте. Также размер шрифта можно задавать с помощью ключевых слов: small, large и т.д., но их обычно не используют.

body { font-size: 1em; }