Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
Блочные элементы
HTML
Этот абзац - блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.
CSS
p { background-color: #8ABB55; }
Использование
Блочные элементы могут отображаться только внутри элемента и его потомков.
Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
Содержание
Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого
структурного
различия
является идея, что
блочные элементы
создают
«более крупную»
структуру
, чем
встроенные элементы
.
Форматирование по умолчанию
По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на
блочные
и строчные использовалось в спецификации
HTML
до версии
4.01
.
В
HTML5
это
противопоставление заменено более
сложным набором
категорий контента .
Категория
«строчных
» элементов примерно соответствует категории , а для
«блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют
категории
потокового контента в
HTML5 (т.е., грубо говоря, «блочные» элементы - это потоковый контент минус текстовый контент).
Кроме того, есть
и другие категории, например, интерактивный контент.
Элементы
Ниже приведен
полный список всех
блочных элементов
(хотя
формально понятие
«блочный
» не применяется к
новым элементам
в HTML5
)
.
Длинная («блочная») цитата.
используется для раскрытия скрытой (дополнительной) информации."> HTML5
Раскрывающийся блок с подробностями.
определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы