Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.

Для высоты элемента работают те же принципы, что и для ширины, за исключением того, что высота блока зависит от высоты содержимого и меняется динамически, например, при изменении размера шрифта или окна браузера. Если явно установить высоту содержимого через свойство height, то высота блока складывается из height и значений margin, border, padding сверху и снизу (пример 4).

При превышении указанной высоты содержимое отображается поверх блока (рис. 4).

Блоки располагаются по вертикали друг под другом.

Поскольку блочные элементы занимают всё доступное пространство по ширине, то они располагаются друг под другом по вертикали.

Преобразование в блочный элемент

В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height. В примере 5 показано создание меню, в котором ссылкой является вся доступная по ширине область.

Для превращения ссылки в блочный элемент к селектору a добавляется свойство display со значением block. После этого вся строка выступает ссылкой, поэтому при наведении курсора на строку, даже за пределами текста, происходит изменение стиля ссылки (рис. 5).

Строчные элементы

Строчными называются такие элементы, которые являются непосредственной частью строки, у них значение свойства display установлено как inline. Элементы, для которых это значение задано по умолчанию, — <span>, <a>, <b> и др., в основном они используются для изменения вида текста или его смыслового выделения.