Añadir espacios en HTML
Escribe cinco espacios entre dos palabras en HTML y el navegador muestra uno. Cualquier serie de espacios, tabulaciones y saltos de línea se junta en un solo espacio. Para añadir espacios extra, usa la entidad de espacio de no separación , una vez por espacio:
sirve para unos pocos espacios en una línea de texto. Para huecos más grandes, o espacio entre elementos, usa CSS, como se muestra más abajo.
Qué hace
es el espacio de no separación (carácter U+00A0). Tiene dos efectos:
- Nunca se junta con otros, así que tres de ellos dan tres espacios.
- La línea nunca se corta en él, así que las palabras a cada lado se quedan juntas.
El segundo es su verdadera función. Los números y sus unidades, las iniciales y las frases cortas que quedan mal partidas en dos líneas se unen con :
En la caja gris, "10" y "km" caen en líneas distintas. En la verde no se pueden separar. Para mantener junto un tramo más largo, white-space: nowrap en un span es más fácil que encadenar entidades; consulta la página de salto de línea.
Entidades de espacio de distintos anchos
HTML tiene caracteres con nombre para espacios más anchos y más estrechos. Tampoco se juntan, así que son útiles para ajustar el espaciado del texto:
| Entidad | Nombre | Ancho |
|---|---|---|
| Espacio de no separación | Igual que un espacio normal |
  | Espacio en | Medio em |
  | Espacio em | Un em (el tamaño de letra) |
  | Espacio fino | Una fracción de em, depende de la fuente |
  | Espacio estrecho de no separación | Fino, y sin salto de línea |
El resaltado azul muestra el ancho de cada espacio. Solo y   impiden además los saltos de línea.
Conservar todos los espacios: pre y white-space
Cuando el espaciado forma parte del contenido (código, arte ASCII, columnas alineadas, poesía), conserva todos los espacios en blanco en lugar de añadir entidades. El elemento <pre> lo hace por defecto, y la propiedad CSS white-space lo hace en cualquier elemento:
Valor de white-space | Espacios | Saltos de línea | Corta líneas largas |
|---|---|---|---|
normal (por defecto) | Se juntan | Se vuelven espacios | Sí |
nowrap | Se juntan | Se vuelven espacios | No |
pre | Se conservan | Se conservan | No |
pre-wrap | Se conservan | Se conservan | Sí |
pre-line | Se juntan | Se conservan | Sí |
pre-wrap suele ser el que quieres para texto de usuarios: conserva el espaciado y aun así ajusta las líneas en pantallas estrechas. pre deja las líneas tal cual y, en su lugar, se desplaza o desborda.
Las tabulaciones también se conservan dentro de pre. Su ancho es de 8 espacios por defecto y la propiedad tab-size lo cambia (tab-size: 4).
Espaciado con CSS
La mayoría de los momentos de "necesito un espacio aquí" son en realidad diseño, y el CSS los resuelve mejor que las entidades, porque el hueco se mantiene coherente y se cambia en un solo sitio:
margin y padding separan elementos, gap separa los elementos de un contenedor flex o grid, letter-spacing y word-spacing espacian el propio texto. Para sangrar la primera línea de un párrafo, usa text-indent, que se explica en la página de centrar texto.
El hueco entre elementos en línea
La otra cara de juntar espacios: el espacio en blanco entre dos elementos en línea o inline-block sigue contando como un espacio. Un salto de línea entre dos botones en tu código fuente deja un pequeño hueco entre ellos:
La primera pareja tiene un hueco por el salto de línea del código fuente. En un contenedor flex el espacio en blanco entre elementos se ignora, así que la segunda pareja se toca. Usa flex y gap cuando quieras controlar el espacio con exactitud.
Errores comunes
- Cadenas de
para el diseño. Se rompen en cuanto cambia la fuente o el tamaño de pantalla. Usamargin,paddingogap. - Escribir espacios extra y esperar que se vean. Se juntan. Usa
owhite-space: pre-wrap. - Escribir
 sin el punto y coma. Los navegadores suelen aceptarlo, pero no es válido y falla en algunas posiciones. Termina siempre con;. - Usar
en todas partes para impedir el ajuste de línea. Un tramo largo de texto sin cortes se desborda en los teléfonos. Une solo lo que debe quedar junto. - Sangrar párrafos con espacios. Usa
text-indenten el CSS.
Preguntas frecuentes
¿Cómo pongo un espacio en HTML?
Un solo espacio funciona tal cual lo escribes, pero los espacios extra se juntan en uno. Para más, usa la entidad de espacio de no separación , una por espacio: a b. Para huecos de diseño, usa en su lugar margin, padding o gap de CSS.
¿Qué significa en HTML?
es un espacio de no separación. Se ve como un espacio normal, pero el navegador nunca corta una línea en él ni lo junta con otros, así que mantiene unidas palabras como 10 km y te permite añadir espacios extra.
¿Por qué HTML ignora mis espacios?
HTML junta los espacios en blanco: cualquier serie de espacios, tabulaciones y saltos de línea se muestra como un solo espacio, y se eliminan los espacios al principio y al final de una línea. Usa , <pre> o la propiedad CSS white-space para conservarlos.
¿Cómo pongo una tabulación en HTML?
HTML no tiene tabulaciones visibles fuera del texto preformateado. Dentro de <pre> o de un elemento con white-space: pre, el carácter de tabulación se conserva y la propiedad CSS tab-size fija su ancho. Para sangrar un párrafo, usa text-indent o padding-inline-start en el CSS.
¿Qué diferencia hay entre y  ?
es tan ancho como un espacio normal.   mide medio em y   mide un em (el ancho del tamaño de letra).   y   no se juntan, pero a diferencia de la línea sí puede cortarse en ellos.
