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

[@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!

[@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!

[@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 👍

[@Utchinsons]

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

[@raaghavendrahm4883]

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

[@whamjampamham]

Here from your Scrimba Responsive CSS Course. When you said "it looks kinda small eh" I was like wait is he Canadian and checked the channel region. From Toronto here, love your tutorials, and really like your project based teaching style, hard to find people who teach with actual projects while explaining their though process.

[@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 😀

[@taariqq]

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

[@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.

[@CharlesSmall]

As a beginner i learn everyday from your videos.

[@ДианаДиана-с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

[@SYPCWAK]

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

[@throughdaniel]

Great mini series! Very helpful for us beginners 🤓

[@newera1110]

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

[@therealmujtaba]

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

[@dildgemckenzie8597]

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

[@KevinPowell]

Thanks!

[@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! ☺️😁👌🤘

[@Laughingattimes2128]

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

[@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.

[@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..

[@judyespana4929]

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

[@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.

[@MathinusG]

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

[@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!

[@milangerloff5252]

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

[@hassanlearning4086]

You make CSS fun and easy to comprehend. 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).

[@yevheniiskomorokhov2048]

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

[@KevinPowell]

Glad to hear that Yevhenii!

[@wonga07]

Really loving this series kevin!

[@KevinPowell]

Glad to hear that Stephen :D

[@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!

[@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.

[@bijkashama4964]

This is great. Very helpful

[@saurabhsoni1759]

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

[@ashrafulhaque8710]

Awesome tutorial! More than a paid course.

[@KevinPowell]

Glad you liked it that much 😊

[@DiamondConnect-r6i]

This was very helpful.

[@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?

[@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.

[@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!

[@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.

[@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

[@Ioannnify]

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

[@KevinPowell]

Thanks, glad you like my videos!

[@asdffacil]

Thanks Kevin

[@christinegivens9048]

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

[@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 :)

[@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".

[@iloveisrael7837]

Best lesson

[@jhred3315]

I like it! Thank you!

[@the_kickers_of_the_coconut6375]

i really love your videos! very great, thanks

[@hassanchehab1871]

great vid

[@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 :).

[@dannydai1]

good lesson!

[@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.

[@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.

[@mehdibenzzine9746]

Thank you sir

[@shrookwageh5976]

awesome

[@ronidey380]

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

[@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/

[@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.

[@ninjaaljun7674]

awesomeeeee

[@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?

[@amirani836]

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

[@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

[@seemsas]

Thank you.

[@KevinPowell]

You're welcome :D

[@Bah-wf5cf]

thanks

[@bloxzyo]

Thank uuuuu

[@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

[@bloc-notes6751]

Merci !

[@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.

[@rupeshogale4384]

Thanks dear bro

[@KevinPowell]

No problem!

[@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/

[@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

[@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?

[@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!

[@Victor_Marius]

line-height: 1.15 as default, I believe

[@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.

[@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.

[@RishavPlayz2007]

Wow! I am the 999th like!

[@ninjaaljun7674]

.