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

HTML-элементы, как правило, делятся на блочные и строчные.

Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 это двоичное различие заменено более сложным набором категорий контента. Категория «блоков» примерно соответствует категории основного потока в HTML5, а «строчные» элементы аналогичны текстовому контенту. Кроме того, есть и другие категории.

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

Список блочных элементов

Ниже приведен полный список всех блочных элементов (несмотря на то, что понятие «блочный» технически не относится к новым элементам в HTML5). Как вы можете увидеть, их не так уж и много.

<address>
Контактная информация
<article>
HTML5Содержание статьи
<aside>
HTML5Боковое содержание.
<blockquote>
Длинная цитата.
<canvas>
HTML5Полотно (холст).
<dd>
Описание определения.
<div>
Фрагмент документа.
<dl>
Список определений.
<fieldset>
Группирование элементов формы.
<figcaption>
HTML5Описание для тега <figure>
<figure>
HTML5Группирование медиа-контента с подписью (см. <figcaption>)
<footer>
HTML5Нижняя часть («подвал») раздела или страницы.
<form>
Форма ввода.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Заголовки от первого до шестого уровня.
<header>
HTML5Верхняя часть («шапка») раздела или страницы.
<hgroup>
HTML5Группирование заголовков раздела или страницы.
<hr>
Горизонтальная разделительная линия.
<li>
Пункт списка.
<main>
HTML5Содержит основной контент, уникальный для страницы.
<nav>
HTML5Содержит навигационные ссылки.
<noscript>
HTML5Содержимое, которое показывается, если JavaScript не поддерживается или выключен.
<ol>
Упорядоченный список.
<output>
HTML5Область вывода информации.
<p>
Текстовый абзац.
<pre>
Предварительно форматированный текст.
<section>
HTML5Раздел веб-страницы.
<table>
Таблица.
<tfoot>
«Подвал» таблицы.
<ul>
Неупорядоченный список.

Отличие от строчных(встроенных) элементов

Существует несколько ключевых отличий блочных элементов от строчных.

  • Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название). При условии что ширина явно не задана.
  • Высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. При условии что высота элемента явно не задана.
  • Браузеры обычно отображают блочные элементы с переводом строки до и после элемента(так, блочные элементы можно представить в виде стопки коробок)
  • Блочные элементы могут отображаться только внутри элемента <body> и его потомков.
  • Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.
    Исключением является элемент <p>, который не может содержать внутри себя другой элемент <p>, а также любой другой блочный элемент. То есть, элемент <p> может содержать только строчные элементы.
  • Текст по умолчанию выравнивается по левому краю.

Стандартная блочная модель

Cтандартная блочная модель отвечает на основной вопрос:

Сколько же в итоге места будет занимать элемент?

Ответ следующий:

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

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

Внутренний отступ задаётся свойством padding. Внутренний отступ — это расстояние между основным содержимым и его границей (рамкой). Если для элемента задать фон, то он распространится также и на поля элемента. Внутренний отступ не может принимать отрицательных значений, в отличие от внешнего отступа.

Внешний отступ задаётся свойством margin. Он добавляет расстояние снаружи элемента от внешней границы рамки до соседних элементов, тем самым разделяя элементы на странице. Внешние отступы всегда остаются прозрачными и через них виден фон родительского элемента.

Значения padding и margin задаются в следующем порядке: верхнее, правое, нижнее и левое.

p {
    padding: 2px 4px 6px 8px; /* T+R+B+L */
    padding: 2px 4px 6px;     /* T+RB+L */
    padding: 2px 4px;         /* TB+RL */
    padding: 2px;             /* TRBL */
}

Граница, или рамка элемента, задаётся с помощью свойства border. Если цвет рамки не задан, она принимает цвет основного содержимого элемента, например, текста. Если рамка имеет разрывы, то сквозь них будет проступать фон элемента.

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

* {
    margin: 0; /* 0px */
    padding: 0;
}

Фактическая ширина элемента складывается из ширины полей (внутренних отступов) padding, границ border и внешних отступов margin.

Элемент <DIV>

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.

Это своего рода универсальное средство построение разметки страницы. Но не стоит им злоупотреблять.

До HTML5 не было семантической разметки и не было специальных тэгов под заголовок <header>, под меню <nav> и тем более под медиа контент(<audio>, <video>). Разметка велась по большей части тэгом <div> и в результате можно было встретить что то наподобие этого(см. рис.).

Реальный пример кода

Схлопывание вертикальных отступов

Соприкасающиеся вертикальные отступы margin объединяются. При этом ширина общего отступа равна ширине большего из исходных отступов.

Схлопывание отступов

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

Чтобы получить желаемый промежуток, можно задать, например, для верхнего элемента padding-bottom, а для нижнего элемента - margin-top.

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

Горизонтальные отступы между элементами просто складываются. Например, горизонтальный отступ между двумя элементами с отступами 30px будет равен 60px.

Выподание вертикальных отступов

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

Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent.

Сложение внешних отступов
Способы решения проблемы слопывания внешних отступов

Строчные элементы

Список строчных элеметов

<b>
Выделяет текст жирным шрифтом
<bdo>
Определяет направление отображения текста.
<cite>
HTML5Определяет заголовок для работы - преобразует текст в курсивный.
<code>
HTML5Определяет кусок программного кода - преобразует текст в моноширинный.
<del>
Определяет текст, который был удален из документа - отображается перечеркнутым текстом.
<dfn>
Выделяет определения термина - преобразует шрифт в наклонный.
<em>
Определяет выделенный текст - преобразует текст в курсивный.
<i>
Преобразует текст в курсивный.
<iframe>
Определяет встроенный frame.
<img>
Определяет изображение.
<ins>
Определяет текст, который был добавлен в документ - отображает текст подчеркнутым.
<kbd>
Определяет текст вводимый с клавиатуры - преобразует текст в моноширинный.
<mark>
HTML5Определяет важную часть текста.
<q>
Определяет короткую цитату.
<rp>
HTML5Определяет, что показывать браузеру, который не поддерживает тег <ruby>.
<rt>
HTML5Добавляет аннотацию сверху или снизу от символов, заключенных в элементе <ruby>.
<ruby>
HTML5Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.
<s>
HTML5Определяет текст, который больше не является правильным - отображает текст перечеркнутым.
<samp>
Определяет текст, который является результатом вывода компьютерной программы.
<small>
Определяет текст маленького размера.
<span>
Определяет строчный элемент документа.
<strong>
Определяет важный текст - преобразует шрифт в полужирный.
<sub>
Определяет текст в нижнем индексе.
<sup>
Определяет текст в верхнем индексе.
<td>
Создает ячейку таблицы.
<th>
Создает заголовочную ячейку в таблице.
<var>
Определяет переменную - выделяет текст курсивом.

Отличие от блочных элементов

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

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

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

Как правило, строчные элементы могут содержать только данные и другие строчные элементы, за исключением элемента <a>. Этим тегом можно оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки.
Для того чтобы верхние и нижние поля и отступы работали для строчного элемента, нужно использовать конструкцию {display: inline-block}. Элемент останется встроенным, но к нему можно будет полноценно применить поля, отступы, задать ширину и высоту.

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

Поведение блочных и встроенных(строчных) элементов

Преобразование в блочный/строчный элемент

Иногда бывает необходимо, чтобы строчный элемент вел себя как блочный и наоборот. Для этого необходимо установить соответствующее значение свойства display.

В некоторых случаях, например, требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height(тем самым получим подобие своего "button").

a {
    display: block; /* теперь ссылка будет представлена на странице как блочный элемент,
	               благодаря чему весь блок, а не только текст становится ссылкой*/
    width: 100px; /* теперь можно установить ширину и высоту */
    height: 200px; 
}

Строчно-блочные элементы

Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные {display: inline-block;}. Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.

Характеристики этих элементов следующие

  • Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
  • Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
  • Ширина равна содержимому плюс значения отступов, полей и границ.
  • Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  • Можно выравнивать по вертикали с помощью свойства vertical-align.
  • Разрешено задавать ширину и высоту.
  • Эффект схлопывания отступов не действует.

Поведение блочных, строчных и строчно-блочные

Ниже представлен наглядный пример использования свойства {display: inline-block;}

#example0 .elem  {
    display: inline-block; /* теперь div отображается как сточно блочный элемент */
    vertical-align: middle; /* выравнивание средней точки элемента по базовой линии родителя
	                       плюс половина высоты родительского элемента. */
    margin: 10px; 
}

Список блочно-строчно-блочных элементов

<audio>
HTML5Аудиоплеер
<button>
HTML5Создает кнопку
<canvas>
HTML5Полотно (холст).
<embed>
HTML5Используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.
<input>
Создаeт поле для ввода данных.
<keygen>
HTML5Используется для генерации пары ключей — закрытого и открытого.
<meter>
HTML5Определяет скалярное измерение в пределах известного диапазона.
<object>
HTML5Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает.
<progress>
HTML5Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.
<select>
Создает выпадающий список.
<textarea>
Создает многострочное текстовое поле.
<video>
HTML5Видеоплеер.