SPAN против DIV: когда использовать в вёрстке сайта

Быстрый ответ

Используйте <span> для внутреннего содержимого, если требуется добавить текст в компоновку, не нарушая расположение остальных элементов. Если же вам нужны свойства блочного элемента, такие как ширина, высота и отступы, но с одновременным сохранением inline-поведения, обратитесь к <div> со стилем display: inline-block;.

<span>Стилизованный текст тут</span>
<div style="display: inline-block;">На этом месте div, в компании замечательных друзей</div>

<span> обладает невидимостью ниндзя, а <div> с параметром inline-block – талантами скульптора, который поможет вам воплотить ваше воображение.

Свойство display: заклинание CSS-волшебника

Inline vs block

Знание свойств <span> и <div> сравнимо с обладанием королевскими сокровищами – значениями свойства display. Они могут быть inline и block. Благодаря CSS, вы можете трансформировать элементы, открывая дорогу передовым дизайнерским решениям.

<span>Ниндзя среди текста</span>  <!--Смешивается с текстом-->
<div>Большой сырный шар</div>   <!--Занимает собственное пространство-->

Подробнее об этом расскажет наш спикер на видео

Мощь CSS

По умолчанию <div> является своего рода блочной стеной, но если прописать display: inline-block;, он превращается в хамелеона, объединяющего в себе черты как встроенного, так и блочного элемента.

Выбор подходящего инструмента

Структура HTML

Для веб-дизайнеров критически важно поддерживать целостность структуры HTML. Вложение блочных элементов в встроенные можно сравнить с попыткой впихнуть квадрат в круг – это неправильно.

Когда семантический HTML встречает CSS

Семантический HTML – это аналог Гарри Поттера в мире веб-страниц: он обеспечивает доступность и удобство понимания. CSS же, подобен Хамелеону, меняющему внешний вид, но сохраняющему смысл неизменным.

Обратите внимание на совместимость

При работе с inline-block следует проверять совместимость. Старые браузеры, например Firefox 2, могут потребовать особого подхода, такого как использование -moz-inline-stack.

Валидация HTML

Валидацию HTML можно рассматривать как проверку правописания. Она гарантирует правильность вашего "заклинания" (кода), держа подальше дементоров (ошибки)!

Визуализация

Воспринимайте SPAN как гибкую ленту (📏), которая легко адаптируется под текстовый контент. В то время как DIV (inline-block) напоминает скорее конструктор из LEGO-блоков (🧱), которым нужно свое личное пространство.

SPAN (📏):                        DIV (🧱):
Не требуй изменения моей ширины! 📵  Ширина – моя зона! 🤸‍

Эффект на поток документа

// Команда: "Поступай, документ!"
Документ: [📃📃📃]
          
// Заклинание: "Инкорпорируй Риторику SPAN (📏)!"
Документ: [📃📏📃📃] // Ого! Очень мало изменений!

// Заклинание: "Инкорпорируй Риторику DIV (🧱)!"
Документ: [📃📃🧱📃] // Занимает свою территорию!

Когда и как использовать каждый элемент

Адаптивный дизайн с помощью inline-block

Временами требуется расположить элементы в одной линии. Задачу с этим прекрасно справляются inline-block элементы, выстраиваясь в строй, и адаптируются под размеры области просмотра.

<div style="display:inline-block;">На старт</div>
<div style="display:inline-block;">Внимание</div>
<div style="display:inline-block;">Марш!</div> <!--В строю с 1996 года-->

Групповая поддержка для встроенных элементов

Если у вас есть коллекция встроенных элементов, которым нужны "объятия", примените <span> с display: inline-block; для их объединения.

<span style="display:inline-block;">
   <span>Первый элемент</span>
   <span>Второй элемент</span>
   <span>Третий элемент</span> <!--"Объятия" для встроенных элементов с 1997 года-->
</span>

Обычные ошибки и способы их избежания

Достаточно распространенная ошибка – это когда в span пытаются вложить div. Это напоминает ожидание, что кит поместится в аквариум для рыбок – от таких действий толку не будет!

Полезные материалы

1. HTML Block and Inline Elements – Поможет сделать правильный выбор инструментария для работы.
2. display – CSS: Cascading Style Sheets | MDN – Объяснение свойства CSS display: разница между inline и inline-block и всё, что между ними.
3. display | CSS-Tricks – CSS-Tricks – Познакомьтесь с искусством создания компоновок при помощи блочных и встроенных элементов.
4. How to use inline-block for layout – Для тех, кто хочет углубиться в изучение использования inline-block.
5. CSS Layout – The position Property – Вкратце о свойствах расположения элементов – ключевая информация для грамотного выбора между <span> и <div>.