Active Whitespace vs. Inactive Whitespace

I just finished the first episode of Design for Developers Workshop online, and I’m looking forward to applying these 7 principles to my site.

One thing I don’t completely understand is the difference between “active” and “inactive” whitespace. What makes whitespace “active”?


Hi David –

Active whitespace is the act of using whitespace intentionally to allow content to flow naturally in a pleasing manner, it adds structure and hierarchy, and leads users from one element to the next. When content is cramped and hard to scan/read it is in dire need of active whitespace to add harmony and visual comfort to the design. By adding padding/margins below and around headers, and spacing the copy properly users can digest content much easier then they would have before when it was cramped.

Inactive whitespace is whitespace that is just there with no consideration and no true reason. Inactive whitespace is often the cause of designers not paying enough attention to everything within the page/composition. It basically serves no purpose to the design.

I hope this helps, but if you have any more questions please feel free to ask. A great read about whitespace in general is on A List Apart.

1 Like

Thanks - I get it!

1 Like

Glad to have been able to help! Happy learning :smile: