Элементы HTML страницы делятся на блочные и строчные. Порядок отображения элементов на странице называется потоком документа. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются слева направо и сверху вниз и при необходимости переносятся на новую строку.
Строчные элементы предназначены для оформления текста на уровне небольших фраз и отдельных слов. Блочные же элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.
1. Блочные элементы display:block
- Блочные элементы занимают 100% доступного пространства по ширине.
- Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.
- До и после блочного элемента существует перенос строки.
К блочным элементам относятся: <div>
, <p>
, <h1>
, <h2>
,<ul>
и т.д.
Блочные элементы по умолчанию занимают всю доступную ширину. Их высота зависит от содержания. Если задать блочному элементу ширину и высоту так, что содержимое элемента не будет в него помещаться, то оно как бы «выпадет» из него.
2. Строчные элементы display:inline
Строчные располагаются друг за другом в одной строке, при необходимости строка переносится. Особенности:
- Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
- Можно задавать только горизонтальные отступы.
- До и после строчного элемента отсутствуют переносы строки.
К строчным элементам относятся: <a>
, <strong>
, <em>
,<span>
и т.д.
Особенности поведения строчных элементов:
- Не реагируют на свойства
width
иheight
. - Частично реагируют на
margin
иpadding
, воспринимая только горизонтальные отступы. - При задании вертикальных
padding
визуально увеличиваются, но без увеличения занимаемого места (не отталкивают другие элементы). - Воспринимают
border
, но рамки сверху и снизу не увеличивают занимаемое элементом место.
Для строчных элементов лучше не задавать вертикальных отступов, т.к. они ведут себя непредсказуемо.
Область, занимаемая блочным элементом, складывается из: ширины и высоты содержания width
, height
, внутренних и внешних отступов padding
, margin
, ширины рамок border
.