Espacio en blanco en HTML: , CSS y caracteres invisibles
Cómo poner espacios que el navegador no junte, qué entidad usar en cada caso y cuándo es mejor resolverlo con CSS.
Respuesta rápida: usa para un espacio que no se corte ni se junte con otros. Para separar elementos o conservar varios espacios, usa CSS: margin, gap o white-space: pre-wrap.
Por qué el navegador junta los espacios
En HTML, varios espacios, tabulaciones o saltos de línea seguidos se muestran como un único espacio. Por eso escribir cinco espacios en el código no produce cinco espacios en pantalla.
Entidades de espacio en HTML
| Entidad | Carácter | Uso |
|---|---|---|
| U+00A0 | Espacio que no permite cortar la línea: «10 kg». |
  | U+2002 | Espacio de medio cuadratín. |
  | U+2003 | Espacio de un cuadratín (ancho de una «M»). |
  | U+2009 | Espacio fino, por ejemplo entre cifras y unidades. |
  | U+202F | Espacio fino que tampoco permite cortar la línea. |
​ | U+200B | Sin ancho: indica dónde se puede cortar una palabra larga. |
­ | U+00AD | Guion suave: solo se ve si la palabra se corta en ese punto. |
Cuándo usar CSS en lugar de espacios
- Separar elementos (botones, iconos, columnas):
margin,paddingogap. - Conservar los espacios y saltos de línea tal como están escritos:
white-space: pre-wrap; - Evitar que un texto se corte:
white-space: nowrap; - Permitir cortar palabras muy largas:
overflow-wrap: anywhere;o la etiqueta<wbr>.
.precio { white-space: nowrap; } /* «1 250 €» siempre en una línea */
.poema { white-space: pre-wrap; } /* respeta espacios y saltos */
.botones { display: flex; gap: 12px; } /* separación sin */Qué evitar
- Maquetar con muchos : el diseño se rompe en pantallas de otro tamaño.
- Ocultar texto con caracteres invisibles: los lectores de pantalla pueden leerlo raro y Google considera spam el texto oculto para posicionar.
- Copiar texto con espacios de ancho cero sin darte cuenta: pueden romper búsquedas, enlaces o código. Revísalo con el detector de la lista de caracteres invisibles.
Preguntas frecuentes
¿Por qué HTML junta varios espacios en uno?
Por defecto, el navegador trata cualquier secuencia de espacios, tabulaciones y saltos de línea como un solo espacio. Para conservarlos, usa la propiedad CSS white-space o la entidad .
¿Es mala práctica usar para separar elementos?
Sí, para maquetar es mejor usar CSS (margin, padding o gap). está pensado para evitar cortes de línea entre palabras que deben ir juntas.
¿Puedo ocultar texto con caracteres invisibles para SEO?
No. Google considera spam el texto o los enlaces ocultos para manipular el posicionamiento. Usa los caracteres invisibles solo para lo que sirven: espaciado y tipografía.
Escrito y revisado por Zohan Ranjha
Zohan crea herramientas de texto Unicode para hispanohablantes. En Texto Invisible revisa cada guía con el estándar Unicode, la documentación oficial de cada plataforma y los avisos de los lectores.