Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про HTML: block, element, inline

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

Вопрос проверяет понимание различий между блочными и строчными элементами и их влияния на layout и отступы.

Короткий ответ

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

Длинный ответ

Разница между div и span напрямую связана с их типом отображения и участием в потоке документа.

Определение

div — блочный элемент, предназначенный для структурирования layout.
span — строчный элемент, используемый для выделения части текста или inline-контента.

Поведение в потоке документа

При замене div на span изменяется следующее:

  • элемент перестаёт начинаться с новой строки

  • ширина больше не растягивается на весь контейнер

  • элемент становится частью строки текста

Работа с отступами

С точки зрения margin:

  • у div корректно работают все margin

  • у span вертикальные margin-top и margin-bottom визуально не влияют на layout

  • горизонтальные margin у span применяются нормально

Практический пример

<div class="box">Текст</div>
<span class="box">Текст</span>

Во втором случае элемент будет вести себя как часть текста, даже при одинаковых стилях.

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

Замена div на span меняет модель layout элемента и может сломать отступы и структуру страницы.

Уровень

  • Рейтинг:

    5

  • Сложность:

    4

Навыки

  • HTML

    HTML

Ключевые слова

#block

#element

#inline

Подпишись на React Developer в телеграм