HTML тег <spacer>
HTML тег <spacer> — устаревший элемент Netscape, не поддерживаемый современными браузерами. Используйте CSS margin, padding или gap.
HTML тег <spacer> является устаревшим элементом, который не поддерживается ни одним современным браузером. Не используйте его. Если вам нужно добавить пустое пространство между элементами на веб-странице, воспользуйтесь CSS — свойства margin, padding и gap обеспечивают полный и надёжный контроль во всех браузерах.
На этой странице объясняется, чем был <spacer>, почему он исчез и — что важнее всего — какие современные техники CSS следует использовать вместо него.
Краткая история
В середине 1990-х годов, до широкого распространения CSS, у веб-авторов не было стандартного способа управлять отступами. Распространённым приёмом была вставка прозрачного изображения размером 1×1 пиксель («spacer GIF») с растягиванием через атрибуты width и height для расположения содержимого.
Чтобы сделать этот приём менее громоздким, Netscape ввёл собственный элемент <spacer> в Netscape Navigator в середине 1990-х годов. Он позволял добавлять горизонтальное, вертикальное или блочное пустое пространство без загрузки изображения. Однако:
- Это было расширение только для Netscape — Internet Explorer и другие браузеры его никогда не реализовывали.
- Он так и не был добавлен в спецификацию HTML.
- Когда CSS созрел, он стал совершенно ненужным.
В результате <spacer> был заброшен. Сегодня он входит в список устаревших и нерекомендуемых HTML-тегов и игнорируется всеми браузерами.
Устаревший (нефункциональный) синтаксис
Только для справочных целей — вот как писался <spacer>. Тег был пустым и не имел закрывающего тега. Этот код не делает ничего ни в одном современном браузере — он приведён исключительно для иллюстрации устаревшего синтаксиса.
<!-- OBSOLETE — does not work in any modern browser. Do not use. -->
<p>
Some text
<spacer type="horizontal" size="100">
more text after a horizontal gap.
</p>
<spacer type="block" width="100" height="50">Современный подход: используйте CSS
CSS заменяет каждый сценарий использования тега <spacer> и работает везде.
Горизонтальные и вертикальные отступы с помощью margin / padding
Используйте margin для добавления пространства снаружи элемента и padding для добавления пространства внутри него. Пример ниже добавляет горизонтальный отступ между двумя словами и вертикальный отступ снизу абзаца:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gap-right {
/* horizontal space after the word */
margin-right: 100px;
}
.spaced {
/* vertical space below the paragraph */
margin-bottom: 40px;
}
.padded {
/* internal space on all sides */
padding: 20px;
background-color: #d4f0f0;
}
</style>
</head>
<body>
<p>
<span class="gap-right">Start</span>End
</p>
<p class="spaced">This paragraph has 40px of space below it.</p>
<p class="padded">This paragraph has 20px of padding inside it.</p>
</body>
</html>Равномерные отступы между элементами с помощью gap
Когда вы располагаете элементы с помощью Flexbox или CSS Grid, свойство gap добавляет равномерное пространство между ними, не затрагивая собственные отступы элементов:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.row {
display: flex;
gap: 24px; /* space between every item */
}
.row > div {
padding: 10px 16px;
background-color: #d4f0f0;
}
</style>
</head>
<body>
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>Другие способы добавить отступы
В зависимости от ваших потребностей, эти стандартные HTML и CSS возможности также помогают управлять пустым пространством:
- Тег
<p>создаёт разрыв абзаца с отступами сверху и снизу по умолчанию. - Тег
<br>вставляет одиночный перевод строки. - Тег
<pre>сохраняет предварительно отформатированный текст, поэтому пустые строки и пробелы отображаются так, как они написаны в HTML. - Символьный объект
создаёт неразрывный пробел. - Символ
	является табуляцией. Как правило, для видимого отображения ему нужен окружающий текст или CSS, напримерwhite-space: pre.
Устаревшие атрибуты (для справки)
Эти атрибуты принадлежали устаревшему тегу <spacer>. Они перечислены лишь для того, чтобы вы могли их распознать в старой разметке — ни один из них не работает сегодня.
| Атрибут | Значение | Описание |
|---|---|---|
| align | left, right, center | Выравнивание спейсера типа block. |
| size | количество пикселей | Размер пустого пространства для спейсеров типа horizontal или vertical. |
| width | количество пикселей | Ширина пустого пространства для спейсера типа block. |
| height | количество пикселей | Высота пустого пространства для спейсера типа block. |
| type | horizontal, vertical, block | Направление/форма спейсера. |