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/XzLgBm/
About BEM: http://getbem.com/naming/
Part 1: The Very Basics - https://youtu.be/EhbZGV2dqZ4
Part 2: Collapsing margins and box-sizing - https://youtu.be/uEfH6qnFF6Y
Part 3: Using Whitespace effectively - (this video)
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/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: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Видео Margin and Padding Deep Dive: Using whitespace to make our designs look better канала Kevin Powell
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/XzLgBm/
About BEM: http://getbem.com/naming/
Part 1: The Very Basics - https://youtu.be/EhbZGV2dqZ4
Part 2: Collapsing margins and box-sizing - https://youtu.be/uEfH6qnFF6Y
Part 3: Using Whitespace effectively - (this video)
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/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: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Видео Margin and Padding Deep Dive: Using whitespace to make our designs look better канала Kevin Powell
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Margin and Padding Deep Dive: The basics](https://i.ytimg.com/vi/EhbZGV2dqZ4/default.jpg)
![Learn the Most Common Design Mistakes by Non Designers](https://i.ytimg.com/vi/mOA0WH00reA/default.jpg)
![Spacing on the web (padding, margin, and Occam's square) — web design tutorial](https://i.ytimg.com/vi/hLvb4SBo4q0/default.jpg)
![How to use Negative Space in UI Design](https://i.ytimg.com/vi/A0Ev_4zto4Y/default.jpg)
![Create a responsive navigation with no JS!](https://i.ytimg.com/vi/8QKOaTYvYUA/default.jpg)
![Floats, Flexbox, Grid? The progression of CSS layouts](https://i.ytimg.com/vi/R7gqJkdc5dM/default.jpg)
![Container queries are possible!](https://i.ytimg.com/vi/fuiEYR6Hoe0/default.jpg)
![5 ways to vertically center with CSS](https://i.ytimg.com/vi/qJVVZYTYA9U/default.jpg)
![6 simple typography tips to more professional looking sites](https://i.ytimg.com/vi/6ardZEhjvV0/default.jpg)
![Improve your CSS by Keepin' it DRY](https://i.ytimg.com/vi/0px6YH-cauQ/default.jpg)
![](https://i.ytimg.com/vi/BE8Oiup7U5w/default.jpg)
![CSS em and rem explained #CSS #responsive](https://i.ytimg.com/vi/_-aDOAMmDHI/default.jpg)
![Chapter 20 How to set margin and padding in CSS Hindi](https://i.ytimg.com/vi/zDXauxMrRMw/default.jpg)
![Margin and Padding Deep Dive: Collapsing margins, resets, and CSS box-sizing](https://i.ytimg.com/vi/uEfH6qnFF6Y/default.jpg)
![5 CSS mistakes that I see way too often](https://i.ytimg.com/vi/iHEkRIF7zxI/default.jpg)
![Advanced CSS Selectors](https://i.ytimg.com/vi/Bcr70LIJcOk/default.jpg)
![Using CSS Position Absolute: some practical examples](https://i.ytimg.com/vi/lUaw-AA9HnA/default.jpg)
![CSS Modules: Why are they great?](https://i.ytimg.com/vi/pKMWU9OrA2s/default.jpg)
![You can do that with margins?](https://i.ytimg.com/vi/Azfj1efPAH0/default.jpg)
![How to Use White Space in UI Design (UI Principles Series)](https://i.ytimg.com/vi/8gu4lFtVcyY/default.jpg)