0:00
Yo what the hell is going on guys? You're watching CSF's Beginners Lesson 39 and in
0:10
this video we're going to talk about padding and margin again, but this time the longhand
0:15
method. That's coming up. Alright so in the last two videos we've talked about padding and margin and we mainly discovered
0:23
that we could write these within one property. That's padding and margin. That was the shorthand
0:27
property. Now I neglected to tell you about the longhand versions of those properties
0:31
and that's where we specify just one particular side of the element to apply margin or padding
0:35
to and the reason I forgot was because I very rarely use it. I normally use the shorthand
0:40
okay but I thought I'd do a quick video to just explain what the longhand version is
0:44
so if you guys want to do that then you can. So in the last couple of videos we talked about the shorthand version and that was this
0:50
We say margin and then we apply four values. One pixel, two pixels, three pixels, four
0:55
pixels right and that would apply one pixel margin to the top, two pixels to the right
1:00
three pixels down below and four pixels to the left. Same for padding. Now if we wanted
1:05
to control for example just the top we could do the longhand version for the top which
1:09
would be simply margin dash top 10 pixels and we could do the same for the left. Margin
1:16
dash left 20 pixels and the same for the right. Margin right 5 pixels and the same for the
1:23
bottom. Margin bottom 2 pixels. Now I've done all four here so it kind of defeats the
1:30
point. If I was doing all four I'd just do that shorthand notation where I write four values within the margin property. However you can do this if you like and it's exactly
1:37
the same for padding. We do the same padding dash top, padding dash bottom, padding dash
1:45
right, padding dash left. All the same okay. So why would we ever use this? Well like I
1:51
say I very rarely use this but a couple of scenarios in which I would would be if I just
1:57
wanted to apply a margin to one side. I couldn't care less about the margin on the other three
2:01
sides. I didn't want them to have one and I just wanted the margin top to be 10 pixels
2:06
Oops. 10 pixels right. So that's one way that I'd use it. The other and more common way
2:12
would be to override a pre-existing margin on one side and to do that let's give an example
2:20
So these classes here, box, we've applied this border of one pixel. But say we give
2:26
this another class and we'll call this one small, this second one. So now it's got a
2:31
class of box and a class of small. Say I wanted to override the divs with a class of small
2:37
so they've got a different padding. Let's just give all boxes padding of 20 pixels on
2:42
all sides. So anything with a class of box has got padding of 20 pixels. Now let's do
2:47
another selector, let's say small, and we'll override that. And we'll say padding left
2:54
I want to be five pixels. So now every element with a class of box is having this padding
3:02
20 pixels applied to the top, right, bottom and left. But any class that has small, I'll
3:07
say we'll override any pre-existing padding you've got for the left with five pixels
3:13
So the top, the right and the bottom can remain whatever they were previously but the
3:17
padding left has to be five pixels. So that's the more common example of when I've used
3:22
these longhand versions. So that about covers it for this lesson, it's been really quick
3:28
If you have any questions about it feel free to comment down below and I'll answer all of those as soon as possible. Otherwise if you enjoy these videos please subscribe, like
3:35
or share them and I'll see you guys in the next one where we're going to take a look at the border property. I'll see you guys then
