An appropriate amount of white space is just as critical to successful design as anything else. Often times, we err on the side of too little white space, which is a problem. To quote Adam Wathan and Steve Schoger in their book, Refactoring UI:
White space should be removed, not added
When designing for the web, white space is almost always added to a design—if something looks little too cramped, you add a bit of margin or padding until things look better.
The problem with this approach is that elements are only given the minimum amount of breathing room necessary to not look actively bad. To make something actually look great, you usually need more white space.
A better approach is to start by giving something way too much space, then remove it until it you're happy with the result.
You might think you'd end up with too much white space this way, but in practice, what might seem like "a little too much" when focused on an individual element ends up being closer to "just enough" in the context of a complete UI.
To help drive this point home in the context of code, this UI is
initialized with way too much white space in the form of indentation. You
can then dynamically adjust the --tab-size property of this page by
using your Arrow keys. This way, you can compare a 2-space indent
to a 4-space indent, and get a better sense of just how wrong you are
about your current choices! :troll
ArrowUp — Increase tab width by 1-space.
ArrowDown — Decrease tab width by 1-space.