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

hi and welcome back we're in part three of this series we're looking at a deep dive into margins and padding's we've looked at all the weird behaviors and how they work and all of that and now I want to look at how you can use them effectively to make a better looking design white spacer which is pretty much empty space in the design world is one of the most important concepts on making a design go from looks okay it Wow look at that really awesome design and a lot of people don't leverage it the right way I see a lot of especially developers but even designers who don't really push it enough and don't create a nice balance between it so what this video is we're gonna be building a little ecommerce type card pop-up thing that you might get for a check out and well I'm gonna be building the whole thing from scratch so we're gonna get into the whole coding thing I'm gonna put more emphasis on the margins and padding and how I'm using them in the thinking that's going on behind creating the white space and why I want more space here and less space there and along the way which one am i using my using margin or am I using padding so let's go see how we can make our websites really shine okay so here we are in code n like usual I will be sharing this with you guys and the link the description will be down below so you can follow that or go check that out once this is all done so basically we're going to make a pretty simple card here it's like an e-commerce style card so let's go take a look and we're going to do a div class card I will close that off close div and now I'm gonna be using the BEM style of naming it's something I want to be trying to do a little bit my naming conventions I am and to happy with in it I don't like necessarily the double underscore if you're not familiar with the BEM naming convention so I'll put a link to that in the description below as well where you can check it out a little bit more so I have my div class card and then we're going to have inside of there and a div class of what are we gonna call it it's gonna be for my image so I guess it will be card image so basically it's just anything that's inside my card gets the double underscore and it's just to say that this is going to be part of this you know it's it's something that belongs inside of my card cool and I'm wondering if I should call that image container instead of image because this isn't the image itself image container and then in here we'll have my actual image so I'm just going to do it the fast way there and we're just going to use an unsplash filler something image so I can do it like this and just put on splash it I don't know exactly how big we need so I'm just gonna throw that in there for now and we should see there we go that's about the size I want whatever we don't need a description at the moment okay so we have an image that's gonna be at the top of our cart and then we have the content the actual regular content so we'll do a div class equals and we'll call this card content because it's the content of the card and we'll close that div off so inside of here we have a few different things and we have an h2 and I'm gonna name pretty much everything I should actually name my image up there too but this will be my title card title and we'll just call it like a cool product or something like that and close h2 then we will have a few paragraphs so our first paragraph is P class and the first one will be our subtitle so it wouldn't be just card subtitle and it I don't know a cool product that you should buy clothes pack nice and simple then we need to do in a paragraph class and we're gonna have a little description of the product so card just grip shim for this I just have a little bit of lorem ipsum saved off-screen so we can have a few power well not a few paragraphs but a few lines of text because I think that would I don't feel like writing a big long thing so we'll paste that in great move this down a little bit scroll that there we go that looks a little better next mean our price so once again we'll have a paragraph for our price so to be you can guess what this one's going to be price and it's gonna be an expensive one let's make it a nice big one three 99.99 closed paragraph and this should have an equals right there and at the very end a Buy Now link so we'll do a href is equal to nothing and the class on this one can be card button by now close a and I think that's all we need and it looks pretty good okay so another thing we're going to do is I am gonna import Merriweather in here just because it's a nice little font it's a Merriweather saws that I'm gonna use so I'm going to import that it and we'll set that up on my body so body we can say that the font family will be Mary weather sauce is just a Google font sauce saw a serif and I'm just for since we're only doing this I mean I kept adding at fifty pixels just to create some space so my cards not stuck to the edge of the screen but normally I wouldn't have this on my body okay so now we can really get started now one thing I said I do like to do and I recommend in the last video especially if you you're not sure about with the collapsing margins and all of that stuff one thing that can be really useful is just doing a general reset so we're going to use that reset we're going to say on here our padding is zero our margin is zero and our box sizing is border whoops border-box so it always whenever you do this will make your layout look less good automatically because everything gets stuck together so sometimes you do this and you're like oh man now I have so much more work to do but it can create less work in the long run just because you can you can really be focused just on on setting things up exactly how you want to cool so on the card itself we'll start there and we'll do I was gonna let's just give it a width of like 600 pixels and so we can actually see it I don't want to give it a background color but we'll give it a box shadow so there 0 0 15 pixels and I want to be black so we'll do our GBA because black itself is really dark zero zero zero and we'll try 0.25 just to fade it out there we go just a really nice subtle drop shadow I find when even if you go up to like 50 or 75 and the shadow is really obvious it's not gonna look so good it's yeah so I'm gonna drop that down to like 25 nice and subtle like he'd even probably drop down to 20 something really really subtle a drop shadows in general the more subtle they are the nicer they look good and I'm just wondering if I should do display flex I think yeah we're gonna also on here do a display flex so it's gonna get the two things to go next to each other like that so that yeah that's more or less what I want this one's a little bigger than I want I want this one to be smaller I have a feeling we have to tweak a little bit of stuff in here as we go just because of the way I'm setting this up but I'm just gonna come the way on splash it works it's using filler images you have the width and the height I'm just gonna make the width a little smaller because I want it to be yeah more like that sweet good I didn't want it to be like this really big image or anything like that I want it to be something maybe a little bigger than that could be good but well swill fine-tune it a little bit near the end so that's good good good now the problem is and we're going to start by looking at the text here and all the text is crammed and obviously we have this big empty space at the bottom so the very first thing I want to do is I want to move things off of the edges and the biggest mistake I see people make is they take their card content because they know they need to move stuff off and they do something like this padding 50 pixels to create the space and yeah okay they created some space that's fine it's not terrible and even actually I see a lot of people do it like this 10 and it's like yeah you moved it off the sides that's good it is easier to read them when it was jammed on there but it it's still not really that nice if you're gonna add padding for something that's this big and we have all this room to work with had a lot of padding so I'm looking at this like I want to bring emphasis on this now you're definitely reading this but you have this big block and it's sort of stuck near the top in general and it's not it becomes more of an aesthetic thing but it's one of the design things you want is to use spacing or like proximity so things that are close to one another and far away from each other to create a hierarchy in the text and how people are going to go through it to read all of the content so on the card content here instead of doing something really small like this I make it bigger me you know bring the text down a little bit so let's start with that so instead of just doing something like 10 pixels or even 50 pixels which is a huge improvement that's cool and if you make them you know if I did margin on here it would look at the same I don't have a color on my background so it's not the end of the world the reason I'm using padding instead of margin because I you know I'm looking at like I'm pushing the content into my box so margin is really pushing things away so but if you made the mistake and you're not sure and you're working in your design it's really not the end of the world or if I did have a background color on this say it was a background of yellow or something like that for some reason and I did my margin I go oh woops that's the wrong one I can just switch it out for the padding if you don't have a background color on it it's really not the end of the world but just remember in general pushing content inwards is going to be done with padding and pushing things away from each other is with margins so let's keep my padding there but we're gonna make it a lot bigger so I'm gonna go with something in the range I like even double this but if I do 100 pixels like that this starts getting kind of small like I don't have a lot of room to work with now my contents getting really crowded so I think I like having a lot of space on the top but for the space around it now I'd rather go with something a little bit smaller so maybe something in the range of like 40 pixels so if we remember the first one is going to be on the top and the bottom and the second one is on the left and the right so I have 40 pixels there and there one thing I would encourage is trying to keep that type of spacing and cool so you could play with that maybe it's 50 maybe 35 but I want a nice healthy space here because I want to separate my image from this and by pushing it off the top it just makes it a lot easier to like my eye gets drawn to this a little more than when it's glued up near the top like that so now we can make we have to make our stuff look a little better right so we'll do card title and in this case I want to make sure it looks already like the bold weight but font weight of 800 is the big heavy one it already is that but we'll lighten it up a little bit just to make it when you use pure black it's a little too black so we want to just make it a little bit darker later I should say pure black I try to avoid pure pure black dark Gray's are usually a bit better and will go with a font size of let's do like 35 pixels it looks okay now you'll see the problem here that's already starting is to be here or starting to merge like they're touching so they're a little too close together but I'm gonna come on my subtitle card sub title and on here let's set up a font size on this one two font size it actually looks pretty good let's say like 20 pixels um find weight let's make this one nice and bold as well I want to make this all CAPA so maybe it should be smaller maybe like 15 pixels text transform upper case and if ever you do this and this it's sort of the same concept as margins and padding's but it's a lot more of a subtle little thing if ever you do uppercase text like this I'm actually gonna make this a little smaller it's go late twelve if ever you do pure uppercase text like that fourteen maybe try some letter spacing on there letter spacing I'm not gonna put a lot of letter spacing on here but I think a little bit of letter spacing like one pixel might even just it makes it a little bit easier to read all cap bold text can be a little hard to read so despite doing that little spacing thing it can really help out and we should also change the color and I want a bright green so I'm just gonna try lime green and hope it works there we go so I think that looks okay but the spacing of it is really bad now so already hierarchy wise I can see this is the title the subtitle text well the price is sort of looks like text and I definitely see the little Buy Now thing so it's coming together but just to show you what you can do so these I want to separate just because they're touching the only reason so I just want to pull those part a little bit so let's give this a margin bottom I don't even know 10 pixels might be too much it is too much should I uppercase the title we'll leave it lowercase but that's too big let's do it like five pixels there we go Pulliam together anyone who's watched my other stuff knows I usually work with MS and REMS but I don't want to have that as a focal point for this I just want to stick with my pixels just so I can really focus and not have to worry about explaining that as well so there we go I want them nice and close together and I want to separate them now from this because this is one sort of piece of information title/subtitle one piece of information then we're gonna have this as a piece of information another one in another one so now after this one so I go to my subtitle remember I like trying to work with margin bottom as much as possible when I'm creating separations between things so on here we can go with something pretty big let's say like 50 pixels so it just creates this nice big separation so now I see this like this has become the emphasis this is what I'm really really looking at then my eye after I see this can jump down to this area so I have a really big space nice big breathing room and the whole point of this is to create a lot a nice really big breathing room around here if you're wondering but like margins and padding's we're really gonna get into more finer details when we get into our button as well on why we're using one or the other because that's kind of a background color on it so that just creates this nice big empty space here then I have my text my text let's play around at that a little bit since we're here so my card description I think I called it right is it actually right description I did I don't like that's too long let's go with card just great like that just because I'm lazy and don't like typing as much and let's make it a little smaller font size usually I like big font sizes on stuff 16 is usually the default so I'm going to look like about 14 for something like this I don't mind it being a bit smaller yeah but most of the time I'm trying to go for larger font sizes just because I find it is kind of small if this was a lot of text I don't know I like larger font sizes one way to make text a much easier to read and it still goes with this whole concept of white space is increase the space between your lines which we can do with our line height so the default is I figured what it is 1.4 not even 1.3 I comment that out at 1.2 then maybe is the default it's in that range it's even smaller than that which is really really tight you know I like I usually do one point six is my starting point and then I'll modify from there if this was a lot of text that's looking pretty good but I'm going for something really airy and spaced out this is pushing it one point six is sort of my default one point four to one point six is usually nice for long bits of text prefer something like this I think that looks nice just because it's we're going for something elegant which is usually a little bit more bassy and we don't have a lot of text to read if you start spacing out the text too much and it's are scanning like double spaced it doesn't always look so nice so that looks pretty good we should change the color again I don't like pure black so color and I'm gonna lighten this up quite a bit probably too much right there maybe a 777 or something like that you want them even though you're going for that elegant nice look you don't want to make it too light because you don't want to make sure people can read it not everyone as as good as eyes as you do and then we need some space underneath that so let's give that some space under so again margin bottom how much we want I don't know I'm just randomly guessing numbers maybe I should space it out equally I did a 50 so let's just use a 50 again so we have equal spacing I'm not sure but I'll stick with that for now now one problem we've run into is our card is getting taller than our image and we'll look at fixing that after without adapting just the images height so now we want to get into the actual price so once again we can come on to here and you a card price and so we want to make it bigger so you know I'm looking at this I see this I have a description but I do want people like it should be like boom by now I want people to buy it and we want you know hopefully this looks like a good deal it's expensive but you know it's for something good at that price so let's make it bigger font size is another 35 pixels sure make it bold will keep the color dark on this one well we shouldn't I'm gonna match the title just so this color and this color the same I think I do want it bold so I'll do a font weight on there of 800 there we go that looks a little bit more I like that a bit I'm gonna reduce this space actually I'm like half maybe mmm I'm just playing around a little bit with it maybe it was okay at 50 what's waiting to light my button done and come back maybe okay so that's looking pretty nice that's all we really need so again people see this we want to see like what's the order they're going and we sort of want them to be like they are you know they clicked on it they're getting more information we sort of want them to buy it at this point so we're putting a description that gives them a little bit more information but here's the price and buy it so so especially my card button I want this baby to stand out so first thing I'm gonna do is give it a background of lime lime green color I don't know if white or black is gonna work better probably black text declaration of none good good good now one thing that's interesting is if I give this padding let's just yeah I'll just do padding like 50 pixels for now you're gonna get this weird thing where it covers other things around it which is not a normal behavior but it's because I put this on or is it a link and a link is an inline element so you can add padding to inline elements you'll see it but it doesn't move the object like you'd expect it to it doesn't actually add to the size of it it's just like this visual thing that causes problems and just to show you if we do it with margin so margin top of like a hundred pixels nothing happens because it's an inline element it thinks it's gonna be a link that's like in your text here and imagine if you had a link in here that had a margin on it that's gonna cause all sorts of problems so whenever you have a link that you want to turn into a button one thing that's really important is you do display:inline-block and now it's gonna behave like you want my margin top is working I don't want it to actually have this I want it to have some padding so I'm putting padding on it because it has a background color anytime something has a background color you have to give it padding solid rule right there go now once again don't do it like 10 pixels it's an it's it's a good start but it's not enough so it's getting there it looks a little better already the reason you have to give something with a background color padding is because you need the text not to touch the side of it the second text is touching the side of things it looks really bad and again I get people who like doing this where it's like violets that's a pretty sad button don't do it and it's the same here don't do a five pixel space make a substantial space make it so the space is obvious so on my price now I didn't add my margin but I think I should so it's at a margin bottom of I don't know 10 pixels maybe it should be bigger than that I'll be like 25 just to push that away and now before because this wasn't in line block the padding wasn't moving it but now if I add padding top of like a hundred pixels I'll take this one off that will actually it will impact how the buttons doing it won't overlap stuff anymore so that's you know why we were doing the inline block stuff now with the padding on something like a button you want it to be different on the top and bottom and left and right Casilla just do 50 pixels like this it sort of works but it's a weird shape and it's way too big so way too big is to start with 225 so I sort of like the spacing on the left and the right but it's still this weird awkward shape now it's way too tall it's you'd never really find a button like this so if you really want to make sure your button is the you know you go and look at what nice buttons look like but in general the padding on the top and bottom is gonna mean like half-fish of what it is on the left and the right so instead of breaking it all up I'm just gonna do what we were looking at so say I went with 25 on the right and the left I could on here add in on the top and the bottom could be like 10 pixels and you start getting a bit nicer of a shape and it's a little small so we'll do like 13 maybe and again it's a general rule of thumb but like double on the sides then when you have on the top and the bottom and usually it starts looking pretty decent so I'm actually pretty happy with that we might as well add a little bit of a we're on that as well card but in hover and we'll just change the background background to green color to white I'm not gonna do anything fancy and even like that really but anyway it works for now yeah okay so we obviously have this big issue of this big space on the bottom and the reason we got that space is as we spaced out our content here this card got longer and longer so this big empty area on the bottom is coming from the amount of padding that we put on here so we remember we've created a big padding there and a big padding here so another thing I see people do is they go ah got too big and do I really need that padding on the bottom or they'll start playing with their padding's and stuff like that so here that's top right left I can do zero and put zero on the bottom and hey let's know now it's all crowded down on the bottom I'd say it's more important for something like this to be nice an area on the top than nice an area on the bottom but it's still nice to have it nice it here here on the bottom it really helps you keep the focus of everything I'm looking here I see the by now jumping off the page it drags my eye down and I come to this and there's a super clear hierarchy of information I've broken everything down into bits so I use padding to create this nice big space around I'm using margin after all my text pieces just to break them apart and then I'm using padding again to create something like a button like this that has a background on it so background has padding spacing just general spacing is with margins um now we could fix this image thing in a few different ways so what I could do is I have my card I never did card image so my card image we're going to do something on that but I also want to select the image inside my card I didn't call it image I called it I added to it image container right good image and Tanner I think I should do something like that but I want to actually get the image so I'm gonna give the image of class 2 class equals card I'll just say image I know this isn't exact in BIM been naming convention but a card I'll just do image like this it's a little strange that anyway it's fine so my card image I want to give it a min height of 100% now the problem with doing that is now it's overlapping this other content so all my empty space went away because it's overflowing out the side here but it means that no matter what happens with my content the image will fit I'm just gonna go on the container now and I'm gonna say overflow:hidden and now it's not it's not hiding so the container can grow and shrink the only problem is this has gotten kind of small I this looks really tiny and this is really big and you might want a bigger image than that will this work flex of 1 flex of 2 mm that is bigger right yeah it made it a little bigger so basically this is just saying try and be about you know take up two parts in take up one part it's not exactly how that works but it it sort of makes sure that we have it taking up a decent amount of space and there we have it guys we're all wrapped up there's margins and padding's covered I think hopefully I didn't miss anything along the way if I did please leave a comment down below and let me know about it if you liked this little miniseries please let me also know if you you want more in-depth sort of breakdowns of core concepts let me know about it and maybe we can explore some more in the coming weeks and months and all of that stuff if you haven't yet subscribed please consider subscribing I make content like this every single week where we explore how to make the web and how to make it look better while we're at it one last big shout out to my patrons thank you guys for making this all possible if you'd like to support this channel in another way go check out the link down below to see how you can support me on page as well and until next time don't forget to make your economy internet just a little bit more awesome

Channel: Kevin Powell

Views: 30,675

Keywords: Kevin Powell, tutorial, html, css, margins, padding, margins and padding, margins vs padding, the difference between margin and padding, how to use margin, how to use padding, margin and padding, margin and padding deep dive, margin vs padding, margin, whitespace, using margin effectively, using padding effectively, using margin, using padding, whitespace better design

Id: TkdBtmwWyZo

Length: 28min 22sec (1702 seconds)

Published: Thu Dec 14 2017