What Is White Space in Design?
White space in design, also called negative space, is the empty area between and around elements on a page, such as margins, padding, the gaps between paragraphs and the space between lines of text. It does not have to be white: it is any unfilled space, and designers use it deliberately to improve readability, group related content and direct attention to what matters most.
What Is White Space in Design?
Designers usually distinguish two kinds. Macro white space is the large space between major elements: the margins around a page, the padding above and below sections, and the gaps between columns. Micro white space is the small space within components: line height, letter spacing, the gap between a label and its input, or between an icon and its text. Both affect how a page feels and how easy it is to use. The Gestalt principle of proximity explains much of its power: people perceive items that are close together as related and items separated by space as distinct, so spacing alone can group content without borders or boxes. White space is sometimes dismissed as empty or wasted space, but it is an active part of the layout. Note that the design term is different from the CSS white-space property, which controls how a browser handles spaces and line breaks inside text, with values such as normal, nowrap, pre and pre-wrap.
How White Space in Design Works
White space shapes a page in three main ways. First, it improves legibility and reading comfort: text with enough line height and a moderate line length is easier to read than dense blocks. Typographers commonly recommend lines of roughly 45 to 75 characters, and WCAG 2.1 success criterion 1.4.12 (Text Spacing) requires that content still works when users increase line height to 1.5 times the font size and paragraph spacing to 2 times, a useful reminder that tight spacing harms some readers. Second, it creates hierarchy and focus. An element surrounded by generous space stands out, which is why landing pages often leave plenty of room around the headline and main call to action. Third, it signals structure: consistent spacing between sections, with tighter spacing within them, lets visitors see the outline of a page before they read a word. In Bootstrap 5, white space is controlled mainly through spacing utilities based on the $spacer variable (1rem by default): .p-3 and .m-3 apply 1rem, .py-5 applies 3rem at the top and bottom, and the full scale for sizes 0 to 5 is 0, .25rem, .5rem, 1rem, 1.5rem and 3rem. Grid gutters (.g-4), flex gaps (.gap-3) and line height classes (.lh-base, .lh-lg) cover the rest.
Best Practices for White Space in Design
Work from a spacing scale rather than arbitrary values, so the same few distances repeat across the site; Bootstrap's six-step scale or a similar 4 or 8 pixel system keeps layouts consistent. Use more space between groups than within them: the gap between two sections should clearly exceed the gap between a heading and its paragraph, otherwise the relationships become ambiguous. Give body text a line height of around 1.5 (Bootstrap's default) and limit paragraph width, for example by placing text in a .col-lg-8 column instead of stretching it across a wide screen. Leave generous space around the primary call to action and avoid crowding it with secondary links. Reduce spacing on small screens rather than removing it, using responsive utilities such as .py-4 .py-lg-5, because mobile layouts still need breathing room but have less height to spare. Resist filling every gap with extra content, badges or decorative elements; the space is what lets the important parts be noticed. At the same time, avoid so much space that related items drift apart or that visitors cannot tell there is more content below the first screen. Finally, review pages at real sizes on real devices, because spacing that looks balanced on a large design canvas can feel cramped on a phone or vast on a wide monitor.
White Space in Design and Canvas Builder
Canvas Builder generates pages with Bootstrap 5 layout and spacing classes, so the white space in the output can be tightened or opened up with standard utilities such as .py-5 or .mb-4 in the exported code. If a generated layout feels crowded or too sparse, you can also say so in your prompt, for example "more space between sections", and compare the result on mobile and desktop before publishing.
Frequently asked questions
Why is white space important in web design?
White space makes content easier to read, shows which elements belong together, and draws attention to the most important items, such as headlines and calls to action. It also makes a site feel calmer and more professional. Removing it to fit more content in usually makes pages harder to scan.
What is the difference between white space and negative space?
In web and graphic design the terms mean the same thing: the unoccupied space around and between elements. "Negative space" is more common in art and illustration, where it can also describe shapes formed by the empty areas. Neither has to be white; any background colour or image can act as white space.
What is the difference between micro and macro white space?
Micro white space is the small spacing inside elements, such as line height, letter spacing and padding within buttons. Macro white space is the larger spacing between major blocks, such as page margins, section padding and the gaps between columns. Both need to be consistent for a layout to feel organised.
How do I add white space in Bootstrap 5?
Use the spacing utilities: .m-* for margin and .p-* for padding, with sides (t, b, s, e, x, y) and sizes from 0 to 5, for example .py-5 or .mb-4. Add breakpoints for responsive spacing, such as .py-4 .py-lg-5, and use .g-* and .gap-* for gaps in grid and flex layouts.