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: codepen.io/kev...
About BEM: getbem.com/naming/
Part 1: The Very Basics - • Margin and Padding Dee...
Part 2: Collapsing margins and box-sizing - • Margin and Padding Dee...
Part 3: Using Whitespace effectively - (this video)
---
My Code Editor: VS Code - code.visualstu...
How my browser refreshes when I save: • How to automatically r...
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...

[@Grewal0007]

Wow I like this series very much..this is totally different from other leading youtubers. Hope you will make more like this. Thanks

[@KevinPowell]

Thanks Gurpreet!

[@lucasgasenzer]

Haha. Somehow you made me think about Bob Ross when you were adding just a liiiiitle bit of padding...

[@KevinPowell]

Hahah, very awesome.

[@joeldcanfield_spinhead]

I know this video is ancient, but I'd love to see more on design concepts like this. I can learn code easily, but my knowledge of design is spotty.

[@mateuszb4387]

this in-depth series is awesome. And more practical than one would think. I would love the series: Z-Index, Stacking contexts and what the opacity and transforms got to do with it.

[@KevinPowell]

Glad you liked the series Mateusz! And thanks for the suggestion 👍

[@fabianpetersen2452]

Hi Kevin, i'm new to css and this was the best ever, i basically spotted all my mistakes vs what the pro's do 😀

[@newera1110]

Thanks a lot man, your videos are pretty clear to understand and really helpful.

[@yamunaa5367]

Great video series.. Keep up the good work Sir👍 Loving CSS.. And feel much motivated to learn.. Gaining confidence that I can improve on my CSS..

[@RishavPlayz2007]

Wow! I am the 999th like!

[@hefalump56]

Hi Kevin, What is the story with the gap between the image at min-height =100% and the box-sizing = border-box, when the content and padding height is less than the image height? It looks to be about 4px.

[@throughdaniel]

Great mini series! Very helpful for us beginners 🤓

[@clevermissfox]

It’s wild to watch this video from 6 years ago, being familiar with KPows content. Would be interesting to watch him refactor the code as I’m positive he would approach it differently these days! Esp in terms of using pixels

[@WEBskie_pl]

Awesome content! You use very easy English that’s why non-native people can easily understands you! I have to check more your videos! ☺️😁👌🤘

[@kristosy]

When applying hover color on buttons I see it is common to make it darker when hovering. However, I think they should get brighter when hovering. I feel like when it becomes brighter it is like the button is saying "Oh oh! Yes, click on me!", while when it gets darker it is more like "Why are you pointing at me? Go away.. can't you see I am trying to hide?"... Is it just me that thinks making it darker feels wrong or is there some science behind this?

[@Glow0110]

Love these breakdown video so much! You're providing so much value here. One question - do you use wordpress or webflow to build websites, and then use custom styling, or where does this kind of in depth knowledge come into play for you? Are you building stuff from scratch?

[@milleniummoses]

The video helped fill in a couple gaps I had in my knowledge. Because of you I've not only learned about Unsplash which I have subsequently used, but I now know about their placeholder images. Golden! Thanks. Is there a way to donate one-time and not recurring?

[@KevinPowell]

I love their placeholder images. As fun as it is to use something like fillmurray.com, after awhile the joke runs out, lol. As for a one-time donation, there is no 'official' way to make one. I have had someone in the past do that by signing up for Patreon, waiting for the payment to go through, and then canceling. A little more work on your part sadly, but it's the only option at the moment.

[@milleniummoses]

That's a thought. I can't do much right now, but, when business gets more stable, I plan to say "Thank you".

[@TheGorillafoot]

I've been a developer for over 10 years now and I really like your channel. Gives me a lot of fresh ideas and methods that I never would have considered.

[@KevinPowell]

That means a lot to me, thanks for taking the time to let me know!

[@arthurradium5823]

really nice video. everything is explained very well. but at the end you rush into a lot of things.. first: with overflow hidden, then the fast tweak with min.height and flex1 and flex 2 at the end....very confusing.

[@abdulkadirguven1173]

Thanks a lot Kevin. But i didn't understand a point. Why did you use Sass? You didn't make use of nesting or any other features of Sass.

[@raaghavendrahm4883]

It was an incredible series, Kevin! Now makes much sense about using padding vs. margin. Thank you!

[@therealmujtaba]

finally someone knows proper UI and CSS.. hands down... Subscribedddd

[@vivekdaiya9324]

as a general rule of thumb, always add a background color while coding as it will make your life a hell lot easier, plus we don't really look at Inspector Tool that often while coding.

[@SYPCWAK]

Thanks, Kevin! As always, your tutorials are very helpful.

[@taariqq]

Whether it is tips or challenges. Everything in small bits -- Kevin technique -- works much better. Thanks.

[@MiguelVargas-pz5zv]

2nd time watching this series. I will be working on finishing my course on Udemy then will rewatch this series and hopefully catch and understand new things.

[@amirani836]

why button didn't shrink when it got padding? why he got extra width?

[@Victor_Marius]

line-height: 1.15 as default, I believe

[@dildgemckenzie8597]

Enjoying all your videos Kevin. Amazing content and thoughtfully explained - and displayed. Thank you.

[@KevinPowell]

Thanks!

[@themarksmith]

Loved the series - interested to see how you would make the card responsive (using em/rem?) and in terms of other video series ideas, I'm interested in understanding more on how to hook buttons/forms up to to JavaScript events (sending and receiving data to node for example) - Thanks for your work!

[@KevinPowell]

Thanks for the suggestion Mark! Maybe I could do a video focusing on decision making for making things responsive at one point as well, and some of the considerations we need to take for different screen sizes. Sounds like that could easily spiral out into a series, but it could very much be worth exploring. For this card, the main thing I'd focus on is the width of it, and the image placement, as it would have to move somewhere on a small screen (probably the top?). I'd shrink down a lot of the white space as well. The smaller the area you have to work, the less overall white space you'll use, even though the relationships are often similar (if I have different spaces at 3em, 2em, and 1em, they might become 1.5em, .75em, and .5em, so smaller, but still relative to one another).

[@Utchinsons]

thankz for the series ! years later still giving to ppl !

[@darwin9111]

Amazing videos. Thank you so much for sharing. I've learned a lot since I started watching them, and have created some things based on your tutorials!

[@KevinPowell]

Very awesome Darwin, I'm glad that they've helped you out!

[@christinegivens9048]

Seriously good content. Thanks. Would love more. Subscribed with bell. Yay!

[@bijkashama4964]

This is great. Very helpful

[@DiamondConnect-r6i]

This was very helpful.

[@kosticivan3921]

I've just got one question unrelated to the point of the video :) what exactly happened at 8:09 with the image, did it zoom in a lot or?

[@KevinPowell]

I was using a placeholder service for the image, and when the page refreshed it loaded in a different image

[@ninjaaljun7674]

.

[@ДианаДиана-с1г]

I watched all 3 parts. It's amazing! Thank you so much! I am now going to practise all the stuff that I've learned

[@jhred3315]

I like it! Thank you!

[@judyespana4929]

I found this incredibly helpful. Thank you for making it. I hope you continue to make more videos like these.

[@asdffacil]

Thanks Kevin

[@BGP_23]

This video was awesome, thank you so much. I now have to go back and redo my class assignment lol. You are an awesome content creator and deserve way more subs.

[@Laughingattimes2128]

Thanks man it was great. I was having a lot of trouble in understanding how to manage the space . Now it makes sense.

[@iloveisrael7837]

Best lesson

[@ninjaaljun7674]

awesomeeeee

[@hassanchehab1871]

great vid

[@bloxzyo]

Thank uuuuu

[@mujtabaiqbal4430]

Since its flex, shouldn't the image stretch all the way down automatically. Why have to give it a height?

[@KevinPowell]

The image isn't a flex item, it's parent is. Which might be a little redundant, but from the old way of doing things a little.

[@mujtabaiqbal4430]

@@KevinPowell Ahhh got it. Thank you for clearing that up for me, Kevin!

[@Bah-wf5cf]

thanks

[@shrookwageh5976]

awesome

[@labtec71]

Why display: flex; does not working for me...

[@KevinPowell]

Hard to say without seeing more, or where it's being used

[@labtec71]

@@KevinPowell I found the prob Kevin, It was within the image container in the HTML. Thanks Dude.

[@hassanlearning4086]

You make CSS fun and easy to comprehend. Thanks

[@milangerloff5252]

thank you Kevin ! yes indeed we learned something new ,i used to struggle with padding and margin no the picture is more clearer.

[@SunilSkanda]

What about negative margins?

[@KevinPowell]

I tend to try and avoid them as much as they can. They act the same way though, just in the opposite way. They "suck" things in, instead of pushing them away.

[@insaneviruss]

Really enjoying your vids. Some topics (if you can cover) 1. Display types and their quirks (like margin padding on inline) 2. Nested Divs and spacing, scrolling, height auto, height 100% Also, I love your thought process, design tips & pacing. You can do long walkthrough videos of webpage designs. Maybe, just the normal work that you might be doing. It would be cool!

[@KevinPowell]

Thanks for the suggestions :) - I have a few series where I build out a full page, might be what you are after!

[@pradeepn7]

Please make a video on CSS design titbits to give us guidelines on better design, for example, you said that whenever you have a background always give it padding, such tips are very helpful, There can be a lot of such tips which will go a long way to make our design better. Thanks

[@KevinPowell]

I plan on doing some more design related stuff in the not too distant future :)

[@christopherikpat5512]

Thanks for what you're doing Kevin. I have gotten better since I started following your page. Your style is awesome. Please can you do a video about box-shadow? It's one of the CSS elements I struggle to grasp. Thanks

[@KevinPowell]

I've had that on my list for awhile now Christopher! I'll be having a similar series to this one on it, maybe as soon as this week.

[@the_kickers_of_the_coconut6375]

i really love your videos! very great, thanks

[@CharlesSmall]

As a beginner i learn everyday from your videos.

[@effabletechnologies5187]

dear kevin subscribed . really like the contents. how can i solve the different browser problem while using css grid.

[@KevinPowell]

I have a whole series on creating a page with CSS grid, but this is the first video that specifically gets into creating fallbacks for browsers that don't support it: kzbin.info?o=U&video_id=wceTVt111OM

[@johnmx8255]

This was awesome Kevin. Although I can't seem to find the naming conventions link you mentioned would be in the comments. Also on that note, what other important resources would you recommend for a self-teaching web developer like me? Great video as always.

[@KevinPowell]

That's because I forgot to put the link :( - Thanks for mentioning it, I added it in now - getbem.com/naming/

[@saurabhsoni1759]

Thanks Sir, This series is really awesome, thanks a lot.

[@MathinusG]

Love it Kevin. Learned a lot. The real life application makes a big difference.

[@indieNik]

I actually wait for your videos Kevin :) Thank you so much!!!

[@KevinPowell]

You'll have a bit less waiting a lot of weeks now, since I'll have a few videos! Hope they never disapoint though! hah.

[@tommyzDad]

Kevin, stupid question--considering I just watched all three of your videos in a row--but isn't _box-sizing: border-box_ supposed to alleviate the issue with the container growing in size when adding padding and margin? Or is it because you're adding padding and margin to the *content* -- the headings, paragraphs, and link-- that the container _div class="card"_ is growing? Did I just answer my own question?

[@KevinPowell]

With border-box, margin still adds to the total size, but padding and borders do not. But I only set a width, not a height, so the card grows in height as I add content and space that content out, so pretty much what you said 😁

[@tommyzDad]

Thanks, Kevin. I appreciate the quick reply.

[@prettycolddeath]

i was expecting you to fix the height of card even the width. becouse generally those divs will be a list

[@KevinPowell]

When you say fix the height, you mean give them a fixed height?

[@Ioannnify]

Thanks Kevin, just discovered you and like what you do!

[@KevinPowell]

Thanks, glad you like my videos!

[@ronidey380]

Thank you so much sir, you are awesome ✌️✌️✌️

[@wonga07]

Really loving this series kevin!

[@KevinPowell]

Glad to hear that Stephen :D

[@yevheniiskomorokhov2048]

Thank you a lot Kevin, I really enjoy watching your tutorials!

[@KevinPowell]

Glad to hear that Yevhenii!

[@driznacc]

Where is the codepen? Or better yet what did you name the codepen? I can't find it

[@KevinPowell]

Oops. codepen.io/kevinpowell/pen/XzLgBm/

[@tokomeno9533]

great i love videos like this very much not lot content like this on youtube

[@KevinPowell]

Thanks a lot Toko, and glad I can fill that hole :).

[@mehdibenzzine9746]

Thank you sir

[@ashrafulhaque8710]

Awesome tutorial! More than a paid course.

[@KevinPowell]

Glad you liked it that much 😊

[@dannydai1]

good lesson!

[@bloc-notes6751]

Merci !

[@space_monkey125]

Hi kevin, I want to design a website where I have a left menu, header and a footer, which are static always. Depending on what I choose in menu the content of the page changes, but menu and header remains the same. How can achieve it ? Do I need to use template, or use js? Please help

[@KevinPowell]

You could use an I suppose, but s have some issues on iOS I believe. You could do it with JS as well, but I'd very much wonder about the performance issues. Mind you, there are enough portfolio things where you can sort the portfolio items visible by topic... you could probably steal a page from that book to get it to work. CodePen probably has some good examples. Question though, is why exactly you don't want it to simply load in a new page. The header, footer and left menu could simply be there on every page, in the same position anyway.

[@space_monkey125]

Kevin Powell I didn't understand, about loading a new page? (last part)

[@space_monkey125]

How to do it!! 😌

[@KevinPowell]

Instead of loading in different content into a single page, couldn't they all just be different html documents?

[@space_monkey125]

Kevin Powell ok I'll do it that way

[@rupeshogale4384]

Thanks dear bro

[@KevinPowell]

No problem!

[@seemsas]

Thank you.

[@KevinPowell]

You're welcome :D

[@AlanNeese]

I really enjoyed the DEEP DIVE!

[@KevinPowell]

Glad to hear that Alan!

[@AlanNeese]

I looked at the list of your videos and I don't see very many that use SASS. Could you do a deep dive on SASS? Thanks and Merry Christmas.

[@KevinPowell]

I use Sass a fair amount in my videos I think, even if it's not in the title or description, I just don't make it much of a focus though. My two more recent series do use it though, and I have something special planned for it in the new year as well!