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.

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

Change Line Height

Change Line Height

Lesson Info

46. Change Line Height

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks