HTML / Insertar varios espacios con NBSP y white-space

Para mostrar múltiples espacios en HTML, use   para una secuencia corta o CSS white-space: pre-wrap para preservar espacios y saltos de línea en el texto. Elija según el objetivo:   también evita el ajuste ordinario en esa posición. Para el espaciado entre botones o elementos de navegación, use CSS gap o margin.

Por qué varios espacios se ven como uno

Con la configuración habitual de white-space: normal, los espacios ordinarios y las tabulaciones consecutivas entre palabras se colapsan para mostrarse. La sangría y los saltos de línea en el código HTML no definen directamente el espaciado visual. Un salto de línea en el código fuente no siempre se convierte en un espacio visible: su tratamiento puede depender del lenguaje y del contexto.

Pegue este ejemplo completo en un editor de texto, guárdelo como spaces.html usando UTF-8 y abra el archivo en un navegador. No se requiere ninguna biblioteca ni servidor. Después de editar, guarde y actualice el navegador. Las palabras de ejemplo usan letras latinas, por lo que las diferencias son fáciles de comparar.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar espacios en HTML</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>Comparar espacios en HTML</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

En el párrafo normal, la fuente contiene tres espacios y luego siete espacios entre Alpha, Beta y Gamma, pero cada secuencia normalmente aparece como un espacio. Seleccione el párrafo en las herramientas de desarrollo e inspeccione su valor calculado white-space. Esto distingue los caracteres en la fuente del colapso de espacios en blanco durante el renderizado.

Insertar espacios de no separación

  es una referencia de carácter HTML para un espacio sin separación, U+00A0. Escribirlo tres veces inserta tres caracteres que no colapsan como espacios ordinarios consecutivos. También puede mantener juntos un número y su unidad.

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

El primer párrafo coloca tres espacios inseparables entre Alpha y Beta. En el segundo párrafo, 10 kg evita un salto de línea ordinario entre el número y la unidad. El ancho real depende de la fuente y del tamaño de la fuente; tres espacios no tienen un ancho fijo en píxeles.

Conectar una oración completa con muchos espacios inseparables reduce las oportunidades de ajuste de línea y puede causar desbordamiento en una pantalla estrecha. El texto copiado también contiene un carácter diferente al de un espacio ordinario, U+0020, lo que puede afectar las búsquedas y las comparaciones de cadenas. Evite repetir estos caracteres para alinear contenido o crear sangrías.

Conservar espacios y saltos de línea con white-space

Cuando los espacios repetidos y los saltos de línea explícitos son partes significativas del texto, aplique white-space: pre-wrap a ese elemento. Esto preserva ambos mientras permite un ajuste adicional para adaptarse al ancho disponible. Esto no garantiza que una URL o una palabra larga sin espacios encaje dentro del cuadro.

En el ejemplo completo, tanto pre-wrap como pre conservan los tres espacios entre Alpha y Beta y el salto de línea antes de Gamma. Estreche la ventana: pre-wrap permite un ajuste adicional, mientras que pre no. El ejemplo usa overflow-x: auto para hacer que este último se desplace horizontalmente. Con pre-line, los saltos de línea explícitos permanecen, pero los espacios consecutivos entre palabras se colapsan.

Esta tabla resume las diferencias comunes en el procesamiento de texto. No implica que detalles como el ancho de tabulación o los espacios al final de línea se comporten de manera idéntica. También revise los valores heredados y otras reglas de CSS. Definición de white-space por W3C

Usar CSS para separar elementos

Para separar dos botones, haga que su elemento padre sea un contenedor flex y configure gap en lugar de agregar espacios de texto. Use margin para el espaciado fuera de un elemento y padding entre su borde y contenido. Los caracteres de espacio pertenecen al contenido; el espaciado de CSS controla el diseño.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

En el ejemplo completo, los botones A y B están separados por gap: 1rem. Un rem se basa en el tamaño de fuente del elemento raíz, por lo que no siempre es de 16 píxeles. Si no hay suficiente ancho, flex-wrap: wrap permite que un botón pase a la siguiente línea. Manteniendo todo lo demás sin cambios, configure solo gap a 0, compare el resultado y restaure 1rem.

Qué comprobar si el resultado es diferente

1. Si aparece el texto literal  , verifique que esté editando HTML. Pegar esto como texto en un editor visual, o escaparlo dos veces como  , evita que se convierta en un espacio.
2. Si los espacios o saltos de línea desaparecen, inspeccione el valor computado white-space del párrafo y confirme que el selector CSS coincide. La indentación de origen dentro de un elemento pre-wrap también puede volverse visible, así que elimine los espacios en blanco no deseados.
3. Si el contenido se desborda en dispositivos móviles, estreche la ventana y busque espacios sin separación repetidos o una configuración pre. Dependiendo del propósito, reemplácelos con espacios normales o use pre-wrap. Verifique nuevamente a un ancho mayor después de realizar el cambio.

Para mostrar la secuencia literal   en una explicación en lugar de insertar un espacio, escriba   en el código fuente HTML. El estándar enumera las referencias de caracteres y sus caracteres correspondientes. Lista de referencias de caracteres de HTML de WHATWG