Etiqueta HTML <spacer> (obsoleta) — Qué usar en su lugar

La etiqueta HTML <spacer> es un elemento obsoleto que ningún navegador moderno soporta. No la uses. Si necesitas añadir espacio vacío entre elementos en una página web, utiliza CSS en su lugar — las propiedades margin, padding y gap te ofrecen un control completo y fiable en todos los navegadores.

Esta página explica qué era <spacer>, por qué desapareció y — lo más importante — las técnicas modernas de CSS que deberías usar en su lugar.

Peligro

La etiqueta <spacer> nunca formó parte de ningún estándar oficial de HTML. Ha dejado de funcionar en todos los navegadores principales durante más de dos décadas. Cualquier elemento <spacer> en tu marcado es ignorado silenciosamente. Usa CSS margin, padding o gap en su lugar.

Breve historia

A mediados de los años 90, antes de que CSS estuviera ampliamente disponible, los autores web no tenían una forma estándar de controlar el espaciado. Un truco habitual era insertar una imagen transparente de 1×1 píxel (el "spacer GIF") y estirarla con los atributos width y height para desplazar el contenido.

Para hacer esto menos engorroso, Netscape introdujo el elemento propietario <spacer> en Netscape Navigator a mediados de los años 90. Permitía añadir espacio vacío horizontal, vertical o en bloque sin cargar una imagen. Sin embargo:

Era una extensión exclusiva de Netscape — Internet Explorer y otros navegadores nunca la implementaron.
Nunca se añadió a la especificación HTML.
Una vez que CSS maduró, se volvió completamente innecesario.

Como resultado, <spacer> fue abandonado. Hoy figura entre las etiquetas HTML obsoletas y en desuso y es ignorado por todos los navegadores.

La sintaxis antigua (no funcional)

Solo como referencia histórica, así es como se escribía <spacer>. La etiqueta era vacía, por lo que no tenía etiqueta de cierre. Este código no hace nada en ningún navegador actual — se muestra únicamente para ilustrar la sintaxis heredada.

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

La forma moderna: usa CSS

CSS reemplaza todos los casos de uso que la etiqueta <spacer> intentaba cubrir, y funciona en todas partes.

Espacio horizontal y vertical con `margin` / `padding`

Usa margin para añadir espacio fuera de un elemento y padding para añadir espacio dentro de él. El ejemplo siguiente añade espacio horizontal entre dos palabras y espacio vertical debajo de un párrafo:

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

Espaciado uniforme entre elementos con `gap`

Cuando organizas elementos con Flexbox o CSS Grid, la propiedad gap añade espacio uniforme entre ellos sin afectar los márgenes propios de los elementos:

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

Otras formas de añadir espacio

Dependiendo de lo que necesites, estas opciones estándar de HTML y CSS también ayudan a controlar el espacio en blanco:

La etiqueta <p> crea un salto de párrafo con espaciado predeterminado arriba y abajo.
La etiqueta <br> inserta un salto de línea simple.
La etiqueta <pre> conserva el texto preformateado, por lo que las líneas en blanco y los espacios aparecen exactamente como se escribieron en el HTML.
La entidad de carácter   crea un espacio de no separación.
El carácter 	 es un tabulador. Normalmente necesita texto circundante o CSS como white-space: pre para renderizarse visiblemente.

Atributos heredados (como referencia)

Estos atributos pertenecían a la etiqueta obsoleta <spacer>. Se listan solo para que puedas reconocerlos en marcado antiguo — ninguno de ellos funciona hoy.

Atributo	Valor	Descripción
align	`left`, `right`, `center`	Alineación de un espaciador de tipo `block`.
size	número de píxeles	Tamaño del espacio vacío para espaciadores `horizontal` o `vertical`.
width	número de píxeles	Ancho del espacio vacío para un espaciador de tipo `block`.
height	número de píxeles	Alto del espacio vacío para un espaciador de tipo `block`.
type	`horizontal`, `vertical`, `block`	Dirección/forma del espaciador.

Práctica

¿Cuál afirmación sobre la etiqueta spacer de HTML es correcta?

Es un elemento obsoleto de Netscape que ningún navegador moderno soporta, por lo que deberías usar CSS en su lugar.Forma parte del estándar HTML actual y funciona en todos los navegadores.Es la forma recomendada de añadir espacio entre elementos flex.Añade un borde alrededor de un elemento.