Xiper

Блочные элементы

Автор: Евгений Рыжков Дата публикации:
Последнее обновление:

Другие «имена»: элементы уровня блок, block-level element. Блочные элементы являются основными строительными конструкциями разметки.

Особые приметы (update уточнения от set и SelenIT):

  • может быть дочерним элементом тега <body>;

    уточнение: тут нужно не забывать о правилах HTML кода. Например, <li> — блочный элемент, но не может быть дочерним элементом body, т.к. обязательно должен находится в <ul>, а , к примеру, <ul> может содержать только <li>.

  • может содержать внутри себя элементы любого типа;

    уточнение: это утверждение справедливо не для всех блочных элементов. Например, <p> — блочный, но содержать другие блочные элементы не может.

  • по умолчанию занимает всю доступную ему ширину;

    уточнение: есть исключения из этого правила: <table>, плавающие блоки — ширина этих по умолчанию зависит от содержимого.

  • генерирует переводы строк до и после своего содержимого, поэтому располагается на отдельной строке;
  • может иметь отступы в любом направлении: margin-top, margin-bottom, margin-left, margin-right, padding-top, padding-bottom, padding-left, padding-right;

    уточнение: есть исключения из этого правила: <table> — padding вообще не применяется.

  • можно явно задавать размеры width и height (по умолчанию эти значения равны auto).

В спецификации HTML4.01 по умолчанию к блочным элементам относятся: address, blockquote, div, dl, fieldset, form, hr, h1-h6, noscript, ol, p, pre, table, ul. В HTML5 к ним добавились: section, nav, article, header, footer, aside.

Заметка

В спецификациях конкретно не сказано, что <li> — блочный элемент. Но так как по своему поведению элемент обладает свойствами блока, в данном разделе будет его уместно отнести к блочным.

Ширина блочных элементов

«Какая ширина у этого блока?» — кажется простым вопросом. Но ответ на него не всегда так уж и очевиден. Разберем основные аспекты образования ширины блочного элемента.

Если ширина не указана явно

Тогда она получает значение auto (width: auto) и элемент занимает всю доступную ширину контентной области родителя. В данной ситуации width родителя = реальной ширине дочернего блока:

блочный элемент width: auto

Изменение ширины контента родителя влечет за собой изменение ширины дочерних элементов:

реальная ширина дочернего зависит от ширины родителя

Ширина элемента не может стать меньше указанного min-width (если конечно оно задано) даже если ширина родителя окажется меньше.

min-width

В такой ситуации ширина дочернего элемента будет больше, чем родителя и тут вступит в силу правило переполнения.

Ширина элемента не может стать больше указанного max-width даже если размеры родителя ему это позволяют:

max-width

Внешние отступы (margin-left, margin-right) влияют на реальную ширину блока:

внешние отступы влияют на реальный размер

Отрицательные внешние отступы способны увеличить реальный размер блока:

отрицательные внешние отступы увеличивают реальный размер

Если ширина явно указана в абсолютных единицах

Тогда все проще — элемент будет иметь заданную ширину независимо от ширины родителя.

явно заданная ширина

Внешние отступы в таком случае тоже уже не влияют на размер.

Если ширина явно указана в относительных единицах

Ширина элемента будет расчитываться относительно ширины контентной области родителя. Будет каждый раз пересчитана при изменениях width родителя. Внешние отступы на размер элемента влияния оказывать не будут.

width: 100% не всегда равно width: auto

разница между width: auto и width: 100%

Блок «подстраивается» под контентную область родителя с учетом своей реальной ширины. При width: 100% контентная область дочернего элемента будет равна контентной области родителя. Это может вызвать переполнение родителя, если к такому дочернему элементу добавить CSS правила, влияющие на реальный размер блока (например, border и/или padding).

Высота блочного элемента

По умолчанию высота принимает значение auto (height: auto) и зависит от реальной высоты содержимого. Соответственно, если меняется высота содержимого, меняется высота и блока. Демо пример такого случая.

Если блоку заданы минимальная или максимальная высота (min-height, max-height), или высота (height) явно указана — поведение блочного элемента аналогично поведению с min-width/max-width/width.

Материалы