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

В HTML большинство элементов можно разделить на две большие группы: блочные (blok) и строчные (inline).

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

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



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

К строчным элементам относятся теги: <a>, <br>, <code>, <em>, <img>, <span>, <strong>, <sub>, <sup>. О тегах HTML читайте здесь.

Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим.

На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.

Строчные элементы могут располагаться внутри блочных элементов.

Применение значения block свойства display к строчному элементу делает его блочным.

Блочные элементы - Структура блока

К блочным элементам относятся теги: <div>, <dl>, <h1>...<h6>, <hr>, <ol>, <p>, <table>, <ul>.

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

Один или несколько блоков могут располагаться внутри другого (родительского) блочного элемента.

В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.

Итак, какова же структура блока?

Любой блок имеет форму прямоугольника.

Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п.

Любое содержимое блока или веб-страницы называется контентом (англ. content — содержание).

Границе блока при помощи свойства border можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.

Между содержимым и границей существуют внутренние расстояния - поля блока (свойство padding). Ими не обязательно пользоваться. То есть если их явно не установить при помощи свойства padding, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.

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

Также для блока можно задать фиксированную ширину (свойство width) и высоту (свойство height), но лишь для его содержимого. Отступы, граница и поля в содержимое блока не входят. По умолчанию, как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.