Margin and Padding Deep Dive: Using whitespace to make our designs look better

Now that we understand how margin and padding really work, it's time to look at how we can use them to make our designs look better.

This video isn't about the actual functionality of margin or padding, but rather a look at the concept of whitespace. It helps build hierarchy and lead the eye to where we want.

The biggest mistake people make when using margin or padding is keeping the numbers really small. In this video I look at making a nice looking e-commerce type card, and play with the margin and padding throughout (as well as a few other features), to help introduce the idea of whitespace.

CodePen: https://codepen.io/kevinpowell/pen/Xz...

About BEM: http://getbem.com/naming/

Part 1: The Very Basics -    • Margin and Padding Deep Dive: The basics  
Part 2: Collapsing margins and box-sizing -    • Margin and Padding Deep Dive: Collaps...  
Part 3: Using Whitespace effectively - (this video)

---

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save:    • How to automatically refresh your bro...  

---

Support me on Patreon:   / kevinpowell  

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram:   / kevinpowell.co  
Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell