Начинающему разработчику не всегда удается разобраться в чем разница между строчными и блочными элементами. Ниже приведены основные различия для облегчения понимания.
Блочные элементы
Блочные элементы — отдельные структурные единицы, которые используются для создания структуры веб-страницы. Такие блоки имеют форму прямоугольника и занимают всю ширину экрана.
See the Pen
example_strochnyye i blochnyye elementy by CHM (@CHMSupport)
on CodePen.0
Размеры блочных элементов могут быть изменены с помощью значений свойств width и height. При помощи свойства border можно задавать толщину, цвет и стиль линий границы, по умолчанию она невидима.
По умолчанию границы вплотную примыкают к контенту блоков, увеличить внутренний отступ можно с помощью значений свойства padding.
See the Pen
example_strochnyye i blochnyye elementy by CHM (@CHMSupport)
on CodePen.0
Строчные элементы
Стили, предназначенные для строчных элементов не работают на блочных (например, vertical-align).
Строчным элементам установлено по умолчанию значение dipslay: inline и они являются частью строки.
Ширина определяется шириной контента и значениями padding и border (если они есть).
See the Pen
example_strochnyye i blochnyye elementy by CHM (@CHMSupport)
on CodePen.0
Элемент можно выравнивать по вертикали относительно родительского блока с помощью свойства vertical-align.
Еще одно отличие заключается в разных принципах расположения контента: в блочной модели — он вертикальный, а в строчной — горизонтальный.
Что касается совместного использования, то внутри блочных элементов можно размещать элементы обоих типов, внутри строчных — только строчные.