Change Line Height
everyone we're going to go from terrible line spacing and all kind of bunched up to nice and breathable and readable to match our mock up. Okay, so we're going to learn something called line height then we're gonna 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. All right, so line spacing and line height. Okay, So we're going to do line spacing first. It's the space between So this is one paragraph right there. Okay. It's one P tag just breaks into two lines. So that's the line spacing. The space between paragraphs is between these two separate p tags and the different. So you always start with line height first. Okay, Because line height affects everything and then we can look at doing the space between paragraphs. So line spacing is pretty easy. We're going to go to a visual studio code. We don't have a styling for your tag yet. So we're going to say the P tag is and what we're gonna do, we'...
re gonna do it's called line height. Okay. And the line height depends on measurements. Okay, depends if you're using rings, like we are use rings 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. Okay, well whatever the body copy sizes. So we've decided everything in here, which which means the p tag is 1.125. so that's kind of where we start. So anything above that is going to show a gap, so if we go 1.5 dream, it's going to be tiny. Little gap rain even. Let's check it. There's a tiny little space that opened up. Let's have a look at 2.5 just to kind of show you big gap. So you decide I always find um oh it was fine. So whatever your size is, okay, about half again bigger. That's that's always a good starting point in my head. Okay, and works for me, but I want this paragraph to kind of space out a bit. Cool. So too, do the spacing between paragraphs. Okay, there's no real special one. You just do margin or padding bottom. It doesn't matter um margin bottom or padding bottom. Why? Because there's no kind of it's going to do 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 zero is going to show something that the default is zero from our CSS reset. So let's look at 00.5. Um and 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 zero in front of it. I find that if I leave the zero and zero off the front it always works but I bet you there's a case where it doesn't so just let's be sent technically correct. Alright. The next thing I want to do is the H. Tag or the H. One. At least I want to push a bit of gap underneath it. So I'm gonna find my H. One. We're gonna do the same thing we're going to do now. My H one doesn't break onto 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.5 remaining, nope too big. Close something there. Here we go. Let's get it all back to square one. Yeah. Point that was too big. What should we do? .12. Dan. Let's have a look. Maybe still a bit big is to one. Ream feels nice. Okay so that space underneath the H one works for me. Alright. And what we might do here just to tie everything up. You can see this div tag goes all the way to the edge here. What is that? Div tag called? Can't remember. Hero Box 1 to 0. Box one we might add some padding to it. So here box one. Okay let's add some petting and we'll add it to the right and I'm going to guess for some pixels. Yeah that kind of works for me. Alright. Line height. Okay. The space between lines is called line height. Oh I got a line spacing before a line height and there is no such thing as the space after or you know space between paragraphs like in something like word or in design. Okay. Use use margin or padding bottom and then just make sure the measurement you're using is the same as okay. 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 to Alright onto the next video.