Блочные элементы
Блочные элементы можно представлять как прямоугольные области на странице.
- До и после блочного элемента существует перенос строки.
- Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.
- Занимают всё доступное пространство по горизонтали.
К блочным элементам относятся такие тэги как: <p>, <h1>, <h2>,<ul> и так далее.
Еще один важный блочный тэг — это тэг <div>, который обозначает просто «блок» или «прямоугольный контейнер».
Строчные элементы
Строчные элементы располагаются друг за другом в одной строке, при необходимости строка переносится. Особенности строчных элементов:
- До и после строчного элемента отсутствуют переносы строки.
- Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
- Можно задавать только горизонтальные отступы.
К строчным элементам относятся такие тэги как: <a>, <strong>,<em>, <span> и так далее.
Строчные элементы предназначены для оформления текста на уровне небольших фраз и отдельных слов. Блочные же элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.
Ширина и высота
Ширина и высота элементов задаются с помощью свойствwidth и height соответственно.
По умолчанию блочные элементы занимают всю доступную ширину, которая равна ширине родительского контейнера или окна браузера.
Высота по умолчанию блочных элементов зависит от их содержимого. Если задать блочному элементу ширину и высоту так, что содержимое элемента не будет в него помещаться, то оно как бы «выпадет» из него.
Строчные элементы не реагируют на задание ширины и высоты в CSS.