{"id":83713,"date":"2025-01-30T20:20:13","date_gmt":"2025-01-30T20:20:13","guid":{"rendered":"https:\/\/mailrelay.com\/glosario\/whitespace\/"},"modified":"2026-10-20T11:15:13","modified_gmt":"2026-10-20T11:15:13","slug":"whitespace","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/en\/glossary\/whitespace\/","title":{"rendered":"Whitespace (White space)"},"content":{"rendered":"\n

Whitespace<\/strong> (written as whitespace<\/em> or white space<\/em>) is the empty area between the elements of a design: around text, images, buttons and margins. It doesn’t have to be white. It’s any space without content, whatever the background color.<\/p>\n\n

Far from being wasted space, it’s what makes a design easy to read. It separates elements from one another, shows what matters and gives the eye a rest.<\/p>\n\n

What is whitespace for?<\/h2>\n\n

It improves readability.<\/strong> Margins and line spacing keep text from looking cramped. A paragraph with room to breathe gets read before a dense block.<\/p>\n\n

It organizes information.<\/strong> Space groups what belongs together and separates what is different. Readers understand the structure without needing lines or boxes.<\/p>\n\n

It directs attention.<\/strong> A button or headline surrounded by space stands out more than one squeezed between other elements. It’s a way of saying “look here”.<\/p>\n\n

It conveys quality.<\/strong> An uncluttered design looks more polished and easier to use. That’s why high-end brands tend to leave lots of empty space.<\/p>\n\n

\"Infographic:<\/figure>\n\n
\n

Design emails that breathe<\/strong><\/p>\n\n\n\n

Create your free Mailrelay account: adjust margins, spacers and padding in the drag-and-drop editor, without touching any code.<\/p>\n\n\n\n

\n
Create a free account<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

Types of whitespace<\/h2>\n\n
Type<\/th>What it is<\/th>Example<\/th><\/tr><\/thead>
Micro<\/td>The small space between letters, lines and paragraphs<\/td>The line spacing of a text<\/td><\/tr>
Macro<\/td>The large space between blocks and around the design<\/td>The margin around a headline or an image<\/td><\/tr>
Active<\/td>Space left on purpose to highlight or separate something<\/td>The space around a buy button<\/td><\/tr>
Passive<\/td>Space that appears naturally when laying out the design<\/td>The gap at the end of a short paragraph<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

All four work together. Micro whitespace makes text easy to read. Macro whitespace organizes the page. Active whitespace is what you use to guide the reader.<\/p>\n\n

\"Infographic:<\/figure>\n\n

Whitespace on a website<\/h2>\n\n

On a website, whitespace helps visitors find what they’re looking for in seconds. A good example is a search engine’s home page: almost everything is empty space, with the search box right in the center.<\/p>\n\n

On a landing page<\/a>, leaving space around the form and the call to action<\/a> avoids distractions. On mobile it matters even more: with little screen space, crowded elements get tapped by accident. More on responsive design<\/a>.<\/p>\n\n

Whitespace in email<\/h2>\n\n

In an email, space is more limited, and each email client displays the design in its own way. Here are the keys:<\/p>\n\n

    \n
  1. One idea per block.<\/strong> Separate each section (news, product, offer) with clear space.<\/li>\n\n\n\n
  2. Generous margins around the button.<\/strong> The main button should be seen at first glance, with nothing crowding it.<\/li>\n\n\n\n
  3. Short paragraphs with line spacing.<\/strong> Two to four lines, with space between them.<\/li>\n\n\n\n
  4. Fewer elements.<\/strong> If everything competes for attention, nothing stands out. Remove anything that doesn’t help the email’s goal.<\/li>\n\n\n\n
  5. Test on mobile.<\/strong> What looks like plenty of space on a computer can feel tight on a phone.<\/li>\n<\/ol>\n\n

    A block-based layout, like the one used in modular email design<\/a>, makes it easier to keep the same spacing across all your emails.<\/p>\n\n

    Whitespace in HTML and CSS<\/h2>\n\n

    If you’re looking for the technical term: in HTML, the browser collapses several consecutive spaces into one. To force a space that doesn’t collapse or break onto a new line, you use the \u00a0<\/code> entity. In CSS, the space between elements is controlled with margin<\/code> (outside the element) and padding<\/code> (inside), and the white-space<\/code> property decides how spaces and line breaks in text are handled.<\/p>\n\n

    When designing websites and emails, it’s best to create space with margins and padding, not with empty lines or lots of \u00a0<\/code> in a row: the result is cleaner and adapts better to each screen.<\/p>\n\n

    Common mistakes<\/h2>\n\n

    Filling every gap.<\/strong> Thinking that empty space is wasted space leads to cluttered designs.<\/p>\n\n

    Inconsistent spacing.<\/strong> If margins change from one block to the next, the design looks sloppy. Always use the same measurements.<\/p>\n\n

    Leaving too much space.<\/strong> If readers have to scroll a lot to find the content, the space stops helping.<\/p>\n\n

    Forgetting about mobile.<\/strong> A design that breathes on a computer can look cramped on a small screen.<\/p>\n\n

    How Mailrelay helps you<\/h2>\n\n

    In Mailrelay’s newsletter editor, you control spacing without touching any code:<\/p>\n\n