HTML\CSS → Блочная модель CSS

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

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

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

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

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

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

2. Строчные элементы display:inline

Строчные располагаются друг за другом в одной строке, при необходимости строка переносится. Особенности:

  1. Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
  2. Можно задавать только горизонтальные отступы.
  3. До и после строчного элемента отсутствуют переносы строки.

К строчным элементам относятся: <a>, <strong>, <em>,<span> и т.д.

Особенности поведения строчных элементов:

  1. Не реагируют на свойства width и height.
  2. Частично реагируют на margin и padding, воспринимая только горизонтальные отступы.
  3. При задании вертикальных padding визуально увеличиваются, но без увеличения занимаемого места (не отталкивают другие элементы).
  4. Воспринимают border, но рамки сверху и снизу не увеличивают занимаемое элементом место.

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

Область, занимаемая блочным элементом, складывается из: ширины и высоты содержания width, height, внутренних и внешних отступов padding, margin, ширины рамок border.