Начинающему разработчику не всегда удается разобраться в чем разница между строчными и блочными элементами. Ниже приведены основные различия для облегчения понимания.
Блочные элементы
Блочные элементы — отдельные структурные единицы, которые используются для создания структуры веб-страницы. Такие блоки имеют форму прямоугольника и занимают всю ширину экрана.
See the Pen example_strochnyye i blochnyye elementy by CHM (@CHMSupport) on CodePen.
Размеры блочных элементов могут быть изменены с помощью значений свойств width и height. При помощи свойства border можно задавать толщину, цвет и стиль линий границы, по умолчанию она невидима.
По умолчанию границы вплотную примыкают к контенту блоков, увеличить внутренний отступ можно с помощью значений свойства padding. Для просмотра стилей в редакторе ниже, смотрите вкладку CSS.
See the Pen example_strochnyye i blochnyye elementy by CHM (@CHMSupport) on CodePen.
При необходимости можно использовать свойство 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.
Что касается совместного использования, то внутри блочных элементов рекомепндуется размещать элементы обоих типов, внутри строчных — только строчные.
