Элементы блочного уровня
Элементы блочного уровня
В этой статье мы рассмотрим элементы блочного уровня HTML и их отличие от элементов инлайн-уровня.
Элементы HTML (HyperText Markup Language) исторически классифицировались как элементы “блочного уровня” или “инлайн-уровня”. Поскольку это презентационная характеристика, в настоящее время она определяется CSS в макете потока. Элемент блочного уровня занимает все горизонтальное пространство своего родительского элемента (контейнера) и вертикальное пространство, равное высоте его содержимого, создавая тем самым “блок”.
Браузеры обычно отображают элемент блочного уровня с новой строкой до и после элемента. Вы можете представить их как стопку коробок.
Примечание: Элемент блочного уровня всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо настолько, насколько это возможно).
Следующий пример демонстрирует влияние элемента блочного уровня:
Элементы блочного уровня
Использование
- Элементы блочного уровня могут появляться только внутри элемента.
Блочный уровень по сравнению с инлайн
Существует несколько ключевых различий между элементами блочного уровня и элементами inline:
Как правило, элементы блочного уровня могут содержать встроенные элементы и (иногда) другие элементы блочного уровня. В этом структурном различии заложена идея о том, что блочные элементы создают “более крупные” структуры, чем инлайн-элементы.
По умолчанию элементы блочного уровня начинаются с новых строк, а инлайн-элементы могут начинаться с любого места в строке.
Различие между блочными и инлайн-элементами использовалось в спецификациях HTML до версии 4.01. Позже это бинарное различие было заменено более сложным набором категорий содержимого. В то время как категория “inline” примерно соответствует категории содержания фраз, категория “block-level” не соответствует напрямую ни одной категории содержания HTML, но элементы “block-level” и “inline” вместе взятые соответствуют содержанию потока в HTML. Существуют также дополнительные категории, например, интерактивный контент.
Элементы
Ниже приведен полный список всех элементов “блочного уровня” HTML (хотя “блочный уровень” технически не определен для элементов, которые являются новыми в HTML5).