0:00
What's going on guys? You're watching CSS for Beginners lesson 38, and today we're
0:12
going to talk about padding. That's coming up. So we've seen what margin is
0:17
that's the external space around the element to separate it from other
0:21
elements. Okay, now we're going to look at the padding, which is an internal spacing
0:25
So it's within the confines of the element itself. Alright guys, so I'm back here in the code and we've got exactly the same two
0:33
elements here, these div tags, and then we've got the class here which is going
0:37
to apply a margin of 30 pixels, a padding of 30 pixels, and a border of one pixel
0:41
which is black all around the elements. So let's open this up in a browser and
0:46
take a look at the padding in more detail. I'm just going to right-click and inspect the element, and right there the green
0:57
color is the padding. So that's within the element itself. You've got your
1:01
border first, then the green, and that's 30 pixels on all sides, right? So we saw
1:07
with margin we can control the top, right, bottom, and left separately. Well we can
1:11
do exactly the same with the padding, so let's just do that. Let's say we want a
1:17
padding of 30 pixels at the top, 20 pixels on the right, and 10 pixels on the
1:24
bottom, and we'll go with 5 pixels on the left. Let's save that and view it in a
1:28
browser again. I'll put this in Google Chrome, and cool, now if we inspect the element
1:37
alright, we can see the green now, the top part of the green is 30 pixels still
1:42
the right side is 20 pixels, the bottom is 10, and the left is 5. Very little
1:48
padding on the left. And again you can see that down here in the DevTools, the padding box here, 30, 20, 10, and 5. So that works exactly the same way as the
1:59
margin. Now you don't really notice the right padding here because the content
2:04
is not very long, but let's just throw that in. Let's give it some larger
2:09
content. I'm just going to copy this here, and I'm going to paste it a few times
2:17
Okay, I think that should go all the way across. I'll save it and view it in a
2:21
browser again. Alright, and now we can see the padding being applied here on the
2:29
right-hand side. So what else can we do? Well, we can do the other shorthands as
2:34
well. We can say we want 30 pixels on the top and bottom, and 20 pixels on the
2:40
left and right. Let's see what that does. Save it and view it in a browser
2:48
Yeah, now you can see the top and bottom paddings are greater than the left and
2:53
right paddings. Alright, and we can say one last, let's say 5 pixels. What we're
3:02
saying here is the same as with the margin. Top 30, right 20, bottom 5, and
3:08
because there's not one specified for the left, it's saying, okay, well I'll copy the right one, which is 20 again. So top, right and left, and bottom. Okay, so let's
3:16
just save this and view it one more time in the browser. Cool, there we go. Let's
3:26
have a look. So, yeah, we've got here 30 at the top, 20 on the right, 5 at the
3:32
bottom, and 20 on the left. Cool, and just like margins, yeah, just like margins, we
3:38
can work with percentages also. So let's say we want a padding of 30 pixels on the
3:45
top and bottom, and then 20% left and right. Okay, let's view that in a browser
3:57
Okay, now we've got this big margin left and right, that's 25% of this whole width
4:03
Okay, the content there, therefore, is going to be about 50%, and we've got a top and
4:07
bottom of 30 pixels. Alright, so that's all there is to paddings, a little bit more
4:12
simple than margins. We don't have the padding collapse like we do with margins
4:16
If you have any questions, though, feel free to comment below, I'll answer all of those. Otherwise, if you enjoy these videos, please like, share, and subscribe, and I'll
4:24
see you guys in the next one
