Главная страница / Блог / Верстка / HTML / Разница между строчными и блочными элементами

Разница между строчными и блочными элементами

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

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

Блочные элементы — отдельные структурные единицы, которые используются для создания структуры веб-страницы. Такие блоки имеют форму прямоугольника и занимают всю ширину экрана. 

See the Pen
example_strochnyye i blochnyye elementy
by CHM (@CHMSupport)
on CodePen.0

Размеры блочных элементов могут быть изменены  с помощью значений свойств width и height. При помощи свойства border можно задавать толщину, цвет и стиль линий границы, по умолчанию она невидима.

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

See the Pen
example_strochnyye i blochnyye elementy
by CHM (@CHMSupport)
on CodePen.0

При необходимости можно использовать свойство box-sizing, которое позволяет изменить алгоритм расчета ширины и высоты, либо учитывая padding и border при расчете, либо нет, в зависимости от значения свойства box-sizing.

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

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

Строчные элементы имеют характерные только им стили, например vertical-align (выравнивание по вертикале). Данное правило не работает в блочных элементах. В тоже время строчному элементу нельзя задать ширину и высоту, как это делается в блочных элементах. Тут ширина определяется  шириной контента  и  значениями padding и border (если они есть). 

See the Pen
example_strochnyye i blochnyye elementy
by CHM (@CHMSupport)
on CodePen.0

Что касается совместного использования, то внутри блочных элементов рекомепндуется размещать элементы обоих типов, внутри строчных — только строчные.

Russian
Прокрутить вверх