Чем принципиально отличается div от span?

Несмотря на внешнюю простоту, различие между div и span является фундаментальным для HTML-вёрстки.

Основное различие

Ключевое отличие заключается в значении свойства display:

• div имеет display: block

• span имеет display: inline

Последствия этого различия

Из-за этого:

• div всегда начинается с новой строки

• div занимает всю доступную ширину

• span располагается внутри строки

• span подстраивается под содержимое

Назначение элементов

Чаще всего:

• div используется для контейнеров, секций и layout

• span используется для стилизации части текста или иконок

Возможность изменения поведения

Оба элемента можно изменить через CSS:

span {
  display: block;
}

Однако семантическое назначение элементов от этого не меняется.

Краткий вывод

div и span отличаются типом отображения и ролью в layout, и выбор между ними должен быть осознанным.