{"id":95474,"date":"2026-09-25T16:30:14","date_gmt":"2026-09-25T16:30:14","guid":{"rendered":"https:\/\/mailrelay.com\/glossary\/espaco-em-branco-whitespace\/"},"modified":"2026-10-20T11:16:59","modified_gmt":"2026-10-20T11:16:59","slug":"espaco-em-branco-whitespace","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/pt\/glossario\/espaco-em-branco-whitespace\/","title":{"rendered":"Espa\u00e7o em branco (Whitespace)"},"content":{"rendered":"\n

O espa\u00e7o em branco<\/strong> (em ingl\u00eas, whitespace<\/em> ou white space<\/em>) \u00e9 a \u00e1rea vazia entre os elementos de um design: ao redor de textos, imagens, bot\u00f5es e margens. Ele n\u00e3o precisa ser branco. \u00c9 qualquer espa\u00e7o sem conte\u00fado, seja qual for a cor do fundo.<\/p>\n\n

Longe de ser espa\u00e7o desperdi\u00e7ado, \u00e9 o que permite que um design seja lido com facilidade. Ele separa os elementos uns dos outros, indica o que \u00e9 importante e d\u00e1 descanso \u00e0 vista.<\/p>\n\n

Para que serve o espa\u00e7o em branco?<\/h2>\n\n

Melhora a leitura.<\/strong> As margens e o entrelinhamento evitam que o texto fique amontoado. Um par\u00e1grafo com respiro \u00e9 lido mais r\u00e1pido do que um bloco compacto.<\/p>\n\n

Organiza a informa\u00e7\u00e3o.<\/strong> O espa\u00e7o agrupa o que vai junto e separa o que \u00e9 diferente. O leitor entende a estrutura sem precisar de linhas nem caixas.<\/p>\n\n

Direciona a aten\u00e7\u00e3o.<\/strong> Um bot\u00e3o ou um t\u00edtulo cercado de espa\u00e7o se destaca mais do que um espremido entre outros elementos. \u00c9 uma forma de dizer “olhe aqui”.<\/p>\n\n

Transmite qualidade.<\/strong> Um design limpo parece mais caprichado e mais f\u00e1cil de usar. Por isso as marcas de alto padr\u00e3o costumam deixar muito espa\u00e7o vazio.<\/p>\n\n

\"Infográfico:<\/figure>\n\n
\n

Crie emails que respiram<\/strong><\/p>\n\n\n\n

Crie sua conta gr\u00e1tis no Mailrelay: ajuste margens, espa\u00e7adores e preenchimentos no editor de arrastar e soltar, sem mexer em c\u00f3digo.<\/p>\n\n\n\n

\n
Criar conta gr\u00e1tis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

Tipos de espa\u00e7o em branco<\/h2>\n\n
Tipo<\/th>O que \u00e9<\/th>Exemplo<\/th><\/tr><\/thead>
Micro<\/td>O espa\u00e7o pequeno entre letras, linhas e par\u00e1grafos<\/td>O entrelinhamento de um texto<\/td><\/tr>
Macro<\/td>O espa\u00e7o grande entre blocos e ao redor do design<\/td>A margem ao redor de um t\u00edtulo ou de uma imagem<\/td><\/tr>
Ativo<\/td>O que \u00e9 deixado de prop\u00f3sito para destacar ou separar algo<\/td>O espa\u00e7o ao redor de um bot\u00e3o de compra<\/td><\/tr>
Passivo<\/td>O que surge naturalmente ao diagramar<\/td>O espa\u00e7o que sobra no final de um par\u00e1grafo curto<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

Os quatro trabalham juntos. O microespa\u00e7o faz o texto ser lido com facilidade. O macroespa\u00e7o organiza a p\u00e1gina. O ativo \u00e9 o que voc\u00ea usa para guiar o leitor.<\/p>\n\n

\"Infográfico:<\/figure>\n\n

Espa\u00e7o em branco em um site<\/h2>\n\n

Em um site, o espa\u00e7o em branco ajuda o visitante a encontrar em segundos o que procura. Um bom exemplo \u00e9 a p\u00e1gina inicial de um buscador: quase tudo \u00e9 espa\u00e7o vazio, e a caixa de pesquisa fica no centro.<\/p>\n\n

Em uma landing page<\/a>, deixar espa\u00e7o ao redor do formul\u00e1rio e do call to action<\/a> evita distra\u00e7\u00f5es. No celular, isso \u00e9 ainda mais importante: com pouca tela, \u00e9 f\u00e1cil tocar sem querer nos elementos amontoados. Saiba mais em responsive design<\/a>.<\/p>\n\n

Espa\u00e7o em branco no email<\/h2>\n\n

Em um email o espa\u00e7o \u00e9 mais limitado, e cada cliente de email exibe o design do seu jeito. Estas s\u00e3o as dicas principais:<\/p>\n\n

    \n
  1. Uma ideia por bloco.<\/strong> Separe cada se\u00e7\u00e3o (not\u00edcia, produto, oferta) com um espa\u00e7o bem vis\u00edvel.<\/li>\n\n\n\n
  2. Margens generosas ao redor do bot\u00e3o.<\/strong> O bot\u00e3o principal deve ser visto logo de cara, sem nada colado nele.<\/li>\n\n\n\n
  3. Par\u00e1grafos curtos com entrelinhamento.<\/strong> De duas a quatro linhas e com espa\u00e7o entre eles.<\/li>\n\n\n\n
  4. Menos elementos.<\/strong> Se tudo disputa a aten\u00e7\u00e3o, nada se destaca. Tire o que n\u00e3o ajuda o objetivo do email.<\/li>\n\n\n\n
  5. Teste no celular.<\/strong> O que no computador parece espa\u00e7o de sobra pode ficar apertado no celular.<\/li>\n<\/ol>\n\n

    Um layout em blocos, como o do design de email modular<\/a>, facilita manter o mesmo espa\u00e7amento em todos os seus envios.<\/p>\n\n

    Espa\u00e7os em branco em HTML e CSS<\/h2>\n\n

    Se voc\u00ea procura o termo t\u00e9cnico: em HTML, o navegador junta v\u00e1rios espa\u00e7os seguidos em um s\u00f3. Para for\u00e7ar um espa\u00e7o que n\u00e3o seja juntado nem quebre a linha, usa-se a entidade \u00a0<\/code>. Em CSS, o espa\u00e7o entre os elementos \u00e9 controlado com margin<\/code> (fora do elemento) e padding<\/code> (dentro), e a propriedade white-space<\/code> define como s\u00e3o tratados os espa\u00e7os e as quebras de linha do texto.<\/p>\n\n

    No design de sites e emails, \u00e9 melhor criar o espa\u00e7o com margens e preenchimentos, e n\u00e3o com linhas vazias ou v\u00e1rios \u00a0<\/code> seguidos: o resultado \u00e9 mais limpo e se adapta melhor a cada tela.<\/p>\n\n

    Erros comuns<\/h2>\n\n

    Preencher cada espa\u00e7o vazio.<\/strong> Achar que espa\u00e7o vazio \u00e9 espa\u00e7o perdido leva a designs saturados.<\/p>\n\n

    Espa\u00e7o sem crit\u00e9rio.<\/strong> Se as margens mudam de um bloco para outro, o design parece desleixado. Use sempre as mesmas medidas.<\/p>\n\n

    Deixar espa\u00e7o demais.<\/strong> Se o leitor precisa rolar muito para encontrar o conte\u00fado, o espa\u00e7o deixa de ajudar.<\/p>\n\n

    Esquecer o celular.<\/strong> Um design que respira no computador pode ficar apertado em uma tela pequena.<\/p>\n\n

    Como o Mailrelay ajuda voc\u00ea<\/h2>\n\n

    No editor de newsletters do Mailrelay, voc\u00ea controla o espa\u00e7o sem mexer em c\u00f3digo:<\/p>\n\n