Tag HTML <spacer> (Obsoleto) — Cosa Usare al Suo Posto

Il tag HTML <spacer> è un elemento obsoleto che nessun browser moderno supporta. Non usarlo. Se hai bisogno di aggiungere spazio vuoto tra gli elementi di una pagina web, utilizza invece CSS — le proprietà margin, padding e gap ti offrono un controllo completo e affidabile su tutti i browser.

Questa pagina spiega cosa era <spacer>, perché è scomparso e — soprattutto — le moderne tecniche CSS da usare al suo posto.

Pericolo

Il tag <spacer> non ha mai fatto parte di alcuno standard HTML ufficiale. Non funziona in nessun browser principale da oltre due decenni. Qualsiasi elemento <spacer> nel tuo markup viene silenziosamente ignorato. Usa CSS margin, padding o gap al suo posto.

Breve storia

A metà degli anni '90, prima che CSS fosse ampiamente disponibile, i web author non avevano un modo standard per controllare la spaziatura. Un trucco comune era inserire un'immagine trasparente da 1×1 pixel (la cosiddetta "spacer GIF") e allungarla con gli attributi width e height per spostare i contenuti.

Per rendere questo approccio meno macchinoso, Netscape introdusse l'elemento proprietario <spacer> in Netscape Navigator a metà degli anni '90. Permetteva di aggiungere spazio vuoto orizzontale, verticale o a blocco senza caricare un'immagine. Tuttavia:

Era un'estensione esclusiva di Netscape — Internet Explorer e gli altri browser non lo implementarono mai.
Non fu mai aggiunto alla specifica HTML.
Una volta che CSS maturò, divenne completamente inutile.

Di conseguenza, <spacer> venne abbandonato. Oggi è elencato tra i tag HTML obsoleti e deprecati e viene ignorato da tutti i browser.

La vecchia sintassi (non funzionale)

Solo per riferimento storico, ecco come veniva scritto <spacer>. Il tag era vuoto, quindi non aveva tag di chiusura. Questo codice non fa nulla in nessun browser attuale — viene mostrato esclusivamente per illustrare la sintassi legacy.

<!-- 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">

Il modo moderno: usare CSS

CSS sostituisce tutti i casi d'uso che il tag <spacer> cercava di coprire, e funziona ovunque.

Spazio orizzontale e verticale con `margin` / `padding`

Usa margin per aggiungere spazio all'esterno di un elemento e padding per aggiungere spazio all'interno. L'esempio seguente aggiunge spazio orizzontale tra due parole e spazio verticale sotto un paragrafo:

<!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>

Result

Spaziatura uniforme tra gli elementi con `gap`

Quando disponi gli elementi con Flexbox o CSS Grid, la proprietà gap aggiunge spazio costante tra di essi senza toccare i margini propri degli elementi:

<!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>

Result

Altri modi per aggiungere spazio

A seconda delle tue esigenze, queste opzioni standard di HTML e CSS aiutano a controllare lo spazio vuoto:

Il tag <p> crea un'interruzione di paragrafo con spaziatura predefinita sopra e sotto.
Il tag <br> inserisce una singola interruzione di riga.
Il tag <pre> conserva il testo preformattato, quindi le righe vuote e gli spazi appaiono esattamente come scritti nell'HTML.
L'entità carattere   crea uno spazio unificatore.
Il carattere 	 è una tabulazione. Di solito richiede testo circostante o CSS come white-space: pre per essere reso visibile.

Attributi legacy (per riferimento)

Questi attributi appartenevano al tag obsoleto <spacer>. Sono elencati solo per permetterti di riconoscerli nei markup datati — nessuno di essi funziona oggi.

Attributo	Valore	Descrizione
align	`left`, `right`, `center`	Allineamento di uno spaziatore di tipo `block`.
size	numero di pixel	Dimensione dello spazio vuoto per gli spaziatori `horizontal` o `vertical`.
width	numero di pixel	Larghezza dello spazio vuoto per uno spaziatore di tipo `block`.
height	numero di pixel	Altezza dello spazio vuoto per uno spaziatore di tipo `block`.
type	`horizontal`, `vertical`, `block`	Direzione/forma dello spaziatore.

Esercitazione

Pratica

Quale affermazione sul tag HTML spacer è corretta?

È un elemento Netscape obsoleto che nessun browser moderno supporta, quindi dovresti usare CSS al suo posto.Fa parte dello standard HTML attuale e funziona in ogni browser.È il metodo consigliato per aggiungere spazio tra gli elementi flex.Aggiunge un bordo attorno a un elemento.