Существуют несколько базовых правил, описывающих как должны быть размешены HTML-элементы и их поведение. Должно быть вы замечали разницу в поведении элементов div и span. Все зависит от свойства отображение — display.
Основные значения свойства display:
Блочные элементы (по умолчанию задаются тегом div) разрывают строку (переходят на новую) и занимают 100% доступной ширины. Для таких блоков можно задать и высоту, и ширину.
Строчные элементы ведут себя как текст — они размещаются в строку. Вы не можете установить для них размеры или верхние и нижние отступы (margin). Каждый элемент будет размешен в строку (без переноса).
Если вам нужны преимущества как блочного, так и строчного элементов, то существует значение inline-block
Давайте разберемся на примере. Создадим несколько блоков с одинаковым содержимым, но разными значениями свойства display.
Как мы видим блок растянулся на всю доступную ширину и можно задать любые отступы (margin). Каждый блок размещается с новой строки.
See the Pen MQgGaJ by webgrind (@webgrind) on CodePen.
Во втором случае ширина блока определилась по его содержимому и изменить ее не получится. Каждый блок размещается без переноса на новую строку.
See the Pen pazVgE by webgrind (@webgrind) on CodePen.