Line height space between paragraphs aka space after

Hi everyone, we're going to go from terrible line spacing, and all kind of bunched up to, ha, nice and breathable, and readable to match our mock-up. So we're going to learn something called Line Height. Then we're going to look at the space between paragraphs, the space after, but really it's just called Margin Bottom. Let's jump in now and work out how to do it. 

So Line Spacing and Line Height. We're going to do Line Spacing first, it's the space between. So this is one paragraph, there, it's one P-tag. Just breaks on to two lines, so that's the Line Spacing. The space between paragraphs is between these two separate P-tags, and they're different. So you always start with Line Height first, because Line Height affects everything, and then we can look at doing the space between paragraphs. 

Line Spacing is pretty easy, we're going to go to Visual Studio Code. We don't have a styling for your P-tag yet, so we're going to say, the P-tag is-- what are we going to do? We're going to do-- it's called Line Height. The Line Height depends on measurements. It depends if you were using Rems like we are, use Rems for Line Height, because you want them to kind of correspond. If you're using pixels for font sizes use pixels. 

Now how big is the line height, there's a lot of guessing, one is going to be, nothing, well, whatever the Body Copy size is, so we've decided, everything in here, which means the P-tag is 1.125, so that's kind of where we start. So anything above that, it's going to show a gap. So if we go about 1.5rem, it's going to be a tiny little gap. Let's check it, so there's a tiny little space that's opened up. Let's have a look at 2.5, just to kind of show you. Big gap, so you decide. 

I always find-- oh, it was fine. So whatever your size is, about half a gain bigger. That's always a good starting point in my head, and works for me, but I want this paragraph to kind of space out a bit. So, to do the spacing between paragraphs there's no real special one, you just do Margin or Padding Bottom, it doesn't matter. Margin-bottom or Padding-bottom. Why? Because there's no kind of-- it's going to visually look the same. We know it does different things, it pushes from the inside or the outside, but it doesn't matter. 

Now this, basically anything above 0, is going to show something. The default is 0, from our CSS reset. So let's look at 0.5rem. That's probably what I want, just a bigger gap in here. You can put a really big gap in there, it's up to you. There you go. You notice I left-- you should put a 0 in front of it. I find that if I leave the 0 off the front it always works, but I bet you there's a case where it doesn't, so just let's be synthetically correct. 

The next thing I want to do is the H tag, the H1 at least, I want to push a bit of gap underneath it. So I'm going to find my H1, I'm going to do the same thing, we're going to do-- now my H1 doesn't break on to two lines, if it did we would have to start looking at Line Height, but it doesn't so I'm just going to use Margin-bottom. And how big should it be? No idea. 0.5rem. Too big, I closed something there. Here we go, it's got real big, do the square one. That was too big, what should we do? 0.125, a bit too big, Dan. Let's have a look. Maybe still a bit big, let's do 1rem. Feels nice. 

So that space underneath the H1 works for me. And what we might do here just to tidy everything out, you can see, this Div tag goes all the way to the edge here. What is that Div tag called? Can't remember, Hero Box1, 2. It's Hero Box1, we might add some padding to it, so Hero Box1, let's add some padding, and we'll add it to the right. And I'm going to guess, for some pixels. Yeah, that kind of works me. Line Height; the space between lines is called Line Height. Oh, I called it Line Spacing before. Line Height, and there is no such thing as the space after, or space between paragraphs, like in something like Word or InDesign, you see, it's Margin or Padding-bottom, and then just make sure the measurement you're using is the same as, or at least the measurement unit is the same, as the unit you're using for the font size. So pixels, this would be pixels too. All right, on to the next video.