Тег spacer в HTML: что делал и чем заменить

Тег <spacer> создавал пустое место на странице: по горизонтали между словами или по вертикали между блоками. Его придумали для старого браузера Netscape. Тег был пустым, без закрывающего тега. Из атрибутов были type, size, width, height и align. Современные браузеры тег не понимают, а стандарт HTML запрещает его и советует брать подходящие теги или CSS.

HTML

Слово<spacer type="horizontal" size="40"></spacer>Слово

В этой статье

1. Что делал тег spacer и почему он не работает
2. Атрибуты spacer: size, type, width, height и align
3. Что происходит с текстом внутри spacer
4. Чем заменить spacer: margin, padding и gap

Что делал тег spacer и почему он не работает

Для браузера spacer неизвестный тег: класс HTMLUnknownElement, показ inline, никакого отступа. Лишнего отступа нет ни между словами, ни между абзацами.

Пример: отступ от spacer и от CSS

Результат

Кнопки выбирают способ, запись показана над рамкой. Под рамкой записаны класс тега, показ и зазор между словами.

У spacer зазор равен 0 в обе стороны. Рабочий отступ дают span с шириной и div с высотой: 40 пикселей, как и было задано.

Атрибуты spacer: size, type, width, height и align

Атрибут type задавал вид отступа: horizontal, vertical или block, а size его размер. Для блока можно было указать width и height, а align задавал, как текст обтекает блок. Сейчас ни один из них не действует.

Пример: атрибуты spacer

Результат

Кнопки выбирают атрибут, запись показана над рамкой. Под рамкой записаны ширина тега и зазор между абзацами.

Ширина тега 0, зазор между абзацами 0. Значение block у type и пара width с height тоже ничего не меняют.

Что происходит с текстом внутри spacer

Если между тегами spacer написать текст, он будет виден: браузер выводит содержимое неизвестного тега как обычное. Так же работают и теги внутри, например a. Это отличает spacer от скрытых устаревших тегов вроде noembed.

Пример: что внутри spacer

Результат

Кнопки выбирают содержимое, запись показана над рамкой. Под рамкой записаны число дочерних тегов, число ссылок и видимый текст.

Текст и ссылка остаются на странице. Сам тег отступа не даёт, а текст внутри просто выводится на страницу.

Чем заменить spacer: margin, padding и gap

Отступ по горизонтали задают свойством margin-right или margin-left у соседнего элемента, отступ по вертикали свойством margin-top или margin-bottom. Внутри flex и grid расстояние между элементами задаёт gap. Если нужен отступ внутри блока, берут padding.

CSS

.menu {
  display: flex;
  gap: 40px;
}

Пример: CSS вместо spacer

Результат

Кнопки выбирают способ, запись показана над рамкой. Под рамкой записан зазор между словами.

Все три CSS-способа дают отступ в 40 пикселей, а spacer оставляет 0. Пустые теги для отступов не нужны.

Проверка в Nu Html Checker для <spacer> сообщает: The “spacer” element is a completely-unknown element that is not allowed anywhere in any HTML content. и The “spacer” element is obsolete. Use CSS instead.

Назад в шпаргалку: Устаревшие HTML-теги