0:00
Yo guys what the hell's going on? You're watching CSS for Beginners lesson 35
0:11
and today we're going to talk all about the paragraph spacing. So that's coming
0:16
up. Okay so in the last lesson we talked about line height right and we said that
0:21
the distance between the two lines of text within one paragraph tag can be
0:25
controlled with the line height property. Remember we give the line height a height
0:29
that's going to allow for the font size and an additional space between the
0:33
lines okay. But how do we control this space between the paragraph tags? That is
0:38
not the line height. We use a property called margin to do that and that's all
0:42
part of the box model and we're going to talk about the box model in more detail in the next lesson but I just wanted to give you a quick introduction to the
0:49
margin property and how it can be used with p tags to control the space between
0:53
those tags. Okay so we're going to jump back into the code now and do just that
0:58
Okay guys so I'm back here in the code and I've already given the p tags these
1:03
two properties here. I've given it a font size of 14 pixels and I've given it a
1:06
line height of 2 m's and remember m's are relative measurements so what this
1:10
is saying is take 14 pixels and times it by 2 so that's going to be a 28 pixel
1:15
line height and if you remember that's going to be the 14 pixels that we need
1:19
for the actual size of the font and then an additional 14 pixels of space so it's
1:24
going to be 7 pixels at the top and 7 pixels at the bottom. That's going to give the overall line height a value of 28 pixels. Okay so that makes sense so
1:33
now what we're going to do is give this a margin bottom property of let's say
1:40
32 pixels. Okay now you can control the margin top, margin bottom, margin left
1:46
margin right. We're not going to do that now like I say we're going to cover the
1:50
box model in the next video and we'll go into that then. For the p tags I'm just
1:55
going to use a margin bottom because that's all we really need to use to separate the p tags. Okay so what we're saying here is look at the end of the p
2:02
tag I want a margin of 32 pixels before the next p tag starts. Makes sense right
2:07
So let's save that now and view it in a browser see what it's done
2:16
Alright then so we've got this 14 pixel font size, a line height of essentially
2:22
28 pixels that's 2 M's and then we've got this 32 pixel gap at the bottom of
2:28
each paragraph tag and that is the margin bottom. Alright if I just right
2:32
click this and inspect elements and I hover over this p tag can you see those
2:37
orange parts there that is the margin of the p tag right so the bottom part is
2:42
larger that's the 32 pixel part the one that we applied and you can see also
2:47
they have a small thin orange margin at the top now that is a default browser
2:51
style. Okay the browsers automatically implement a margin top of 1 M generally
2:58
speaking so that is the default browser styles at play. We've overridden it for
3:02
the bottom and we've applied a 32 pixel margin and so there's a bigger gap at
3:06
the bottom between the p tags. Okay so that about covers it this was a really
3:11
quick lesson like I said we're going to go into more detail about the margin and padding and other ways to control the box model properties in the next video
3:19
So until then guys if you enjoy these videos please subscribe, like or share
3:25
them. If you have any questions comment below and I'll see you guys in the next video
