В HTML большинство элементов можно разделить на две группы: блочные (blok ) и строчные (inline ).
Начинающему разработчику не всегда сразу удается разобраться - в чем разница между ними, а также запомнить принадлежность какого-либо элемента к конкретной группе. Но со временем, с опытом работы у Вас не возникнет и намека на подобные затруднения.
Строчные элементы
К строчным элементам относятся теги:
,
,
,
,
, ,
,
,
....
Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим.
На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.
Строчные элементы, естественно, могут располагаться внутри блочных.
Блочные элементы
К блочным элементам относятся теги:
-
,
- Блочные элементы могут отображаться только внутри элемента и его потомков.
...
,
,
,
,
,
....
Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются последовательно один под другим
. По умолчанию два блочных элемента не могут располагаться на одной строке.
Один или несколько блоков также могут располагаться внутри другого (родительского
) блочного элемента.
В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.
Любой блок имеет форму прямоугольника.
Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content
- содержание
).
Границе блока при помощи свойства border
можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.
Между содержимым и границей существуют внутренние расстояния - поля
(свойство padding
). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойства padding
, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.
Вокруг блока - за его границей существуют пустые, ничем не занятые области, называемые отступами
(свойство margin
). Отступы - это расстояния от границы блока, до ближайших элементов, или, если их нет, то до краев окна браузера. Отступы также, как и поля по умолчанию отсутствуют, либо имеют минимальную ширину, автоматически определяемую браузером.
Также для блока можно задать фиксированную ширину (свойство width
) и высоту (свойство height
), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.
Фрагмент кода:
Строчные элементы
расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега
div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
Результат:
Строчные элементы расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
Блочные элементы
HTML
Этот абзац - блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.
CSS
p { background-color: #8ABB55; }
Использование
Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
Содержание
Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого
структурного
различия
является идея, что
блочные элементы
создают
«более крупную»
структуру
, чем
встроенные элементы
.
Форматирование по умолчанию
По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на
блочные
и строчные использовалось в спецификации
HTML
до версии
4.01
.
В
HTML5
это
противопоставление заменено более
сложным набором
категорий контента .
Категория
«строчных
» элементов примерно соответствует категории , а для
«блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют
категории
потокового контента в
HTML5 (т.е., грубо говоря, «блочные» элементы - это потоковый контент минус текстовый контент).
Кроме того, есть
и другие категории, например, интерактивный контент.
Элементы
Ниже приведен
полный список всех
блочных элементов
(хотя
формально понятие
«блочный
» не применяется к
новым элементам
в HTML5
)
.
Контактная информация.
) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для дальнейшего распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого."> HTML5
Содержание
статьи.
представляет собой раздел документа с контентом, косвенно связанным с основным содержимым документа (часто представленным как боковая панель)."> HTML5
Побочное содержание.
(от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом .">
Длинная («блочная») цитата.
используется для раскрытия скрытой (дополнительной) информации."> HTML5
Раскрывающийся блок с подробностями.
определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы
,
-
,
,