Про блочные и строчные элементы

Взгляд в прошлое

Во времена html 3.2 в спецификации элементы делили на блочные и строчные. Одним из критериев выбора было может ли элемент вызвать “разрыв абзаца”, значит элемент блочный, иначе строчный.

Когда появился html 4 в спецификации уже писали о блочных и “инлайновых” элементах.

Тогда выделяли три критерия отбора:

• Модель содержимого - блочный элемент может содержать как “инлайновый” так и другой блочный элемент. А “инлайновый” только другой “инлайн” элемент.
• Формат по умолчанию - блочный элемент начинается с новой строки, а “инлайн” элемент располагается вдоль строки.
• Особенность направления текста которое фигурирует в элементе.

Получается блок - это самая крупная структурная единица.

Но эта классификация не давала полной картины, существовали спорные элементы которые непонятно к какой категории относить.

Но тут упустили еще одну деталь, вид элемента зависит от другой технологии - css.

css

В ранней спецификации css 1, как раз уже существовало понятие о блочных и “инлайновых” элементах. Считалось что блочный элемент - это элемент с display:block или display:list-item, который представлял собой прямоугольник и занимал все доступное пространство по горизонтали. А “инлайновым” все другие элементы, которые располагаются в строке и при переносе строки разрываются на несколько прямоугольников.

В стандарте css 2 появляется понятие бокса (прямоугольника). Возникает вопрос, а как связан бокс и элемент?

Примерно таким образом:

• один элемент может порождать несколько боксов.
• может и не порождать ни одного.
• бокс может возникать сам по себе.

Что получаем. Строка текста - это контейнер строки, внутри этой строки “строчные боксы”. А контейнер в который упакованы эти строки - это блочный бокс. Дополнительно блочные боксы могут вкладываться в другие блочные боксы образуя крупные элементы разметки.

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

в html описывается логическая структура, в css визуальная.

Выводы

1. Оказывается что у нас нет блочных и строчных элементов, так как модель содержимого у всех элементов разная исходя из их логического предназначения.
2. Визуальная составляющая элемента относится исключительно к css. То есть css может изменить внешний вид элемента, но на модель содержимого повлиять не может.
3. Модель содержимого элемента важна при построении DOM, а далее в игру уже вступает css со своим оформлением.

Важно то для чего элемент предназначен (html), а не как он выглядит (css)