Что изменится, если заменить div на span с точки зрения отображения и отступов?

Question

div — блочный элемент, а span — строчный. div занимает всю доступную ширину и начинается с новой строки. span располагается внутри строки и не ломает поток текста. Вертикальные margin у span не работают так же, как у div. Замена может существенно изменить внешний вид страницы.

YeaHub · Accepted Answer

Разница между div и span напрямую связана с их типом отображения и участием в потоке документа.Определениеdiv — блочный элемент, предназначенный для структурирования layout.span — строчный элемент, используемый для выделения части текста или inline-контента.Поведение в потоке документаПри замене div на span изменяется следующее:элемент перестаёт начинаться с новой строкиширина больше не растягивается на весь контейнерэлемент становится частью строки текстаРабота с отступамиС точки зрения margin:у div корректно работают все marginу span вертикальные margin-top и margin-bottom визуально не влияют на layoutгоризонтальные margin у span применяются нормальноПрактический пример

Текст

Текст Во втором случае элемент будет вести себя как часть текста, даже при одинаковых стилях.Краткий выводЗамена div на span меняет модель layout элемента и может сломать отступы и структуру страницы.