{"id":81929,"date":"2024-09-20T11:50:44","date_gmt":"2024-09-20T11:50:44","guid":{"rendered":"https:\/\/mailrelay.com\/?post_type=glossary&p=81929"},"modified":"2026-10-20T09:07:55","modified_gmt":"2026-10-20T09:07:55","slug":"espacio-en-blanco-whitespace","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/es\/glosario\/espacio-en-blanco-whitespace\/","title":{"rendered":"Espacio en blanco (Whitespace)"},"content":{"rendered":"\n

El espacio en blanco<\/strong> (en ingl\u00e9s, whitespace<\/em> o white space<\/em>) es la zona vac\u00eda que hay entre los elementos de un dise\u00f1o: alrededor de textos, im\u00e1genes, botones y m\u00e1rgenes. No tiene por qu\u00e9 ser blanco. Es cualquier espacio sin contenido, del color que sea el fondo.<\/p>\n\n\n\n

Lejos de ser espacio desperdiciado, es lo que permite que un dise\u00f1o se lea con facilidad. Separa unos elementos de otros, marca qu\u00e9 es lo importante y hace que la vista descanse.<\/p>\n\n\n\n

\u00bfPara qu\u00e9 sirve el espacio en blanco?<\/h2>\n\n\n\n

Mejora la lectura.<\/strong> Los m\u00e1rgenes y el interlineado hacen que el texto no se vea apelotonado. Un p\u00e1rrafo con aire se lee antes que un bloque compacto.<\/p>\n\n\n\n

Ordena la informaci\u00f3n.<\/strong> El espacio agrupa lo que va junto y separa lo que es distinto. El lector entiende la estructura sin necesidad de l\u00edneas ni recuadros.<\/p>\n\n\n\n

Dirige la atenci\u00f3n.<\/strong> Un bot\u00f3n o un titular rodeado de espacio destaca m\u00e1s que uno metido entre otros elementos. Es una forma de decir \u00abmira aqu\u00ed\u00bb.<\/p>\n\n\n\n

Transmite calidad.<\/strong> Un dise\u00f1o despejado parece m\u00e1s cuidado y m\u00e1s f\u00e1cil de usar. Por eso las marcas de gama alta suelen dejar mucho espacio vac\u00edo.<\/p>\n\n\n\n

\"Infograf\u00eda:<\/figure>\n\n\n\n
\n

Dise\u00f1a emails que respiran<\/strong><\/p>\n\n\n\n

Crea tu cuenta gratis en Mailrelay: ajusta m\u00e1rgenes, separadores y rellenos en el editor de arrastrar y soltar, sin tocar c\u00f3digo.<\/p>\n\n\n\n

\n
Crear cuenta gratis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Tipos de espacio en blanco<\/h2>\n\n\n\n
Tipo<\/th>Qu\u00e9 es<\/th>Ejemplo<\/th><\/tr><\/thead>
Micro<\/td>El espacio peque\u00f1o entre letras, l\u00edneas y p\u00e1rrafos<\/td>El interlineado de un texto<\/td><\/tr>
Macro<\/td>El espacio grande entre bloques y alrededor del dise\u00f1o<\/td>El margen alrededor de un titular o de una imagen<\/td><\/tr>
Activo<\/td>El que se deja a prop\u00f3sito para destacar o separar algo<\/td>El espacio que rodea un bot\u00f3n de compra<\/td><\/tr>
Pasivo<\/td>El que aparece de forma natural al maquetar<\/td>El hueco al final de un p\u00e1rrafo corto<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Los cuatro trabajan juntos. El micro espacio hace que el texto se lea bien. El macro espacio ordena la p\u00e1gina. El activo es el que usas para guiar al lector.<\/p>\n\n\n\n

\"Infograf\u00eda:<\/figure>\n\n\n\n

Espacio en blanco en una web<\/h2>\n\n\n\n

En una web, el espacio en blanco ayuda a que el visitante encuentre en segundos lo que busca. Un buen ejemplo es la portada de un buscador: casi todo es espacio vac\u00edo, y la caja de b\u00fasqueda queda en el centro.<\/p>\n\n\n\n

En una landing page<\/a>, dejar espacio alrededor del formulario y del call to action<\/a> evita distracciones. En el m\u00f3vil es todav\u00eda m\u00e1s importante: con poca pantalla, los elementos amontonados se tocan sin querer. M\u00e1s en responsive design<\/a>.<\/p>\n\n\n\n

Espacio en blanco en el email<\/h2>\n\n\n\n

En un email el espacio es m\u00e1s limitado, y cada gestor de correo muestra el dise\u00f1o a su manera. Estas son las claves:<\/p>\n\n\n\n

    \n
  1. Una idea por bloque.<\/strong> Separa cada secci\u00f3n (noticia, producto, oferta) con un espacio claro.<\/li>\n\n\n\n
  2. M\u00e1rgenes generosos alrededor del bot\u00f3n.<\/strong> El bot\u00f3n principal debe verse a la primera, sin nada pegado.<\/li>\n\n\n\n
  3. P\u00e1rrafos cortos con interlineado.<\/strong> De dos a cuatro l\u00edneas y con espacio entre ellos.<\/li>\n\n\n\n
  4. Menos elementos.<\/strong> Si todo compite por la atenci\u00f3n, nada destaca. Quita lo que no ayude al objetivo del email.<\/li>\n\n\n\n
  5. Prueba en el m\u00f3vil.<\/strong> Lo que en el ordenador parece espacio de sobra puede quedar justo en el tel\u00e9fono.<\/li>\n<\/ol>\n\n\n\n

    Un dise\u00f1o por bloques, como el del dise\u00f1o de email modular<\/a>, facilita mantener el mismo espacio en todos tus env\u00edos.<\/p>\n\n\n\n

    Espacios en blanco en HTML y CSS<\/h2>\n\n\n\n

    Si buscas el t\u00e9rmino t\u00e9cnico: en HTML, el navegador junta varios espacios seguidos en uno solo. Para forzar un espacio que no se junte ni se corte de l\u00ednea se usa la entidad &nbsp;<\/code>. En CSS, el espacio entre elementos se controla con margin<\/code> (fuera del elemento) y padding<\/code> (dentro), y la propiedad white-space<\/code> decide c\u00f3mo se tratan los espacios y los saltos de l\u00ednea del texto.<\/p>\n\n\n\n

    En el dise\u00f1o de webs y emails, conviene crear el espacio con m\u00e1rgenes y rellenos, no con l\u00edneas vac\u00edas o muchos &nbsp;<\/code> seguidos: el resultado es m\u00e1s limpio y se adapta mejor a cada pantalla.<\/p>\n\n\n\n

    Errores habituales<\/h2>\n\n\n\n

    Llenar cada hueco.<\/strong> Pensar que el espacio vac\u00edo es espacio perdido lleva a dise\u00f1os saturados.<\/p>\n\n\n\n

    Espacio sin criterio.<\/strong> Si los m\u00e1rgenes cambian de un bloque a otro, el dise\u00f1o parece descuidado. Usa siempre las mismas medidas.<\/p>\n\n\n\n

    Dejar demasiado espacio.<\/strong> Si el lector tiene que desplazarse mucho para encontrar el contenido, el espacio deja de ayudar.<\/p>\n\n\n\n

    Olvidar el m\u00f3vil.<\/strong> Un dise\u00f1o que respira en el ordenador puede verse apretado en una pantalla peque\u00f1a.<\/p>\n\n\n\n

    C\u00f3mo te ayuda Mailrelay<\/h2>\n\n\n\n

    En el editor de newsletters de Mailrelay controlas el espacio sin tocar c\u00f3digo:<\/p>\n\n\n\n