Margins and Padding

Quick reference

• 00:05 Okay, in this video, I wanna talk about margins and padding.
• 00:08 And we're gonna talk about something called the box model,
• 00:11 a little bit later on.
• 00:12 It goes into this in a little bit more detail, but for right now,
• 00:15 we can just talk about margins and paddings separately.
• 00:17 So, we look at our dotted thing here, and remember,
• 00:20 I put in these line breaks to make this a little bit bigger, right here.
• 00:23 And that's not a great thing to do.
• 00:25 It's much better to do that with pure CSS, so
• 00:27 if we hit reload, here's what it looks like.
• 00:29 And we use something called margins and padding to do that.
• 00:32 So let's talk about margins first.
• 00:34 Come back to our style sheet, and let's type in margin, and let's say 50 pixels.
• 00:39 And a pixel is a unit of measure.
• 00:41 And so if we save this, and come back here and
• 00:43 hit reload, you see this whole thing bops over.
• 00:45 So margins deal with the space outside.
• 00:48 So right outside our box, we're saying,
• 00:51 put 50 pixels of space around each of these sides, right?
• 00:56 So we could just as easily say, 100, so that's the margin.
• 01:02 Now margin, like other things,
• 01:03 you can designate each side to be a specific margin.
• 01:06 So we could go margin-top 5 pixels,
• 01:12 margin-bottom 5 pixels,
• 01:16 margin-left, 10 pixels, and
• 01:22 margin-right, 10 pixels.
• 01:27 So actually, we wanna get rid of the first margin thing, okay.
• 01:31 So like other things, we can also do a shorthand for
• 01:36 this, in which case, we could go just margin,
• 01:41 let's go 5 pixels, 10 pixels, 5 pixels, 10 pixels.
• 01:47 So the order of this is, top right, bottom left.
• 01:52 We save this, reload, we get the same thing.
• 01:54 So this is top, let's change this to 50, boom, it bops it down to 50.
• 01:59 So again, you have to memorize this order.
• 02:01 So, I usually put each one on a separate line.
• 02:04 I'll just type in the margin top, margin bottom, etc.
• 02:07 So let's get rid of this, save this, hit reload, go back to the way it was.
• 02:11 Next, I wanna talk about padding.
• 02:13 And padding is just padding.
• 02:15 Let's go 50 pixels save it and hit reload.
• 02:18 And padding deals with inside.
• 02:20 Margin is outside, padding is inside.
• 02:23 So, the padding around each border, we've put at 50.
• 02:27 And just like with the other one,
• 02:31 we can do padding-top 50pixels,
• 02:36 padding-bottom 50 pixel,
• 02:40 padding-left 10 pixel,
• 02:43 padding-right 10 pixels.
• 02:47 Save this, hit reload, and we get 50 on the top and 10 on the right, and
• 02:52 actually 10 on the left.
• 02:54 We had 10 on the right here, but since this only goes out this far,
• 02:58 you can't really tell.
• 02:59 Yeah, so that's padding, and just like the other one,
• 03:04 we can also do padding 50, 100, 50, 100.
• 03:08 Do the shorthand, save this, and then, we get that.
• 03:12 So again, this is top, this is right, this is bottom, and this one is left.
• 03:18 Again, you have to sort of memorize that order, so I don't usually do that.
• 03:23 I'll just write it out, padding top, padding bottom, padding right,
• 03:25 padding left, just because it's easier to remember that way.
• 03:29 So that's margins, that's padding,
• 03:31 just remember that margins are along the outside and padding is along the inside.

Lesson notes are only available for subscribers.