7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 1 hour

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 CSS Line Height and Vertical Margins

A big part of ensuring readability with your typography is vertical spacing: the space between headings and paragraphs, between lines in a paragraph, and so on. In this lesson, you’ll learn how to control your typography’s vertical spacing with the line-height property, as well as vertical margins.

2.4 CSS Line Height and Vertical Margins

Hi and welcome back to Start Here Learn Topography CSS. In this lesson, we're going to have a very quick look at vertical spacing and we'll be doing that in the contexts of looking at the CSS properties line height and margin. Now, this would be quite quick because we're going to go into more detail on working with these two properties in a later lesson. So in this lesson we just want to give you a quick insight as to how these two properties work and how they affect text elements. The HTML that we have here is just the same as the HTML that you ended up with in the last lesson. The only difference is we've added a second paragraph here and the CSS, you can just use the same file that you're working with in the last lesson and just build on top of what you already had. Right now as you can see in our HTML right now we have two paragraphs. And I want you to have a look at your HTML page in chrome and then open up the inspector and then just highlight over the top of one of the paragraph tags and the highlighting that you seeing overlaid on top of this paragraph element shows you the spacing that's currently applied to this element and the blue section is highlighting the element itself. The orange section is highlighting something that we call margins. Now in CSS, there are two main ways to put spacing around an element, and we're gonna go into this more in our late course, where we cover layout in depth. But all you need to know for what we're looking at here, is that margins are a type of spacing that is added on to the outside of an element, so this first paragraph here, Chrome DevTools is showing us with the little highlighted orange parts, that we have external spacing like this applied in the form of margins. If you also have a look down here in this layout window, you can hover over this outer section of this representation of the paragraph's layout so that you can drill down and take a closer look at exactly what is making up the layout of this element. And then also in the styles tab, what you can see here is CSS that's actually coming from the browser itself. So we haven't written any of the CSS. This is all chrome's own default CSS. So by default, it includes this margin code here that puts external spacing of 1em both above and below the paragraph. Now this margin is what is used to help create a break in between paragraphs. So if we didn't have a break like that it would become very difficult to distinguish one paragraph from the next. So I'd show you what I'm talking about. I'm just going to override. Both the top and bottom margin. So I'm going to add margin hyphen top zero and then I'm going to add margin hyphen bottom zero. And now you'll see the space in between paragraphs disappear. So when you see those paragraphs scrunched up together and hard to distinguish from one another, you can see why even though margins are technically a part of layout CSS, they are very important for topography CSS as well. And these two values margin top and margin bottom are typically going to be the true that you need to look at most closely when you setting up the vertical spacing for things like headings, paragraphs, bullet lists and other kinds of text elements So that give you a quick introduction to margins and to have a thick text elements. The other vertical spacing property that you need to be aware of is line height, and I'll just get rid of these margins for now and put that back to its default. Line height is pretty much what it sounds like line height is the heart of every line of your text. So you can see right now there's a little bit of spacing in between each of the lines in this paragraph that comes from the fact that each one of the lines has a set height and that set height it is typically entered as a multiple of the height of the letters. So going to show you what it looks like if the line height in these paragraphs Is set to be the exact same height as the letters themself. So I'm going to use the property line hyphen hot and then I'm just going to use a value of one. So that value of one says make the line hot exactly one times the height of the letters in this element. So now, you can see how scrunched up the lines are together. We've still got the vertical margin in between each of the elements but because the line height is now too small there's not enough space in between each of these lines. So line height is very important for ensuring good vertical spacing in your typography and again we cover in more detail when we go through styling headings and regular text in the later lesson, but just a quick tip, for me personally, my preferred line height is 1.618. And the reason is 1.618 is the value of phi, P-H-I. And that's a value that's been used in architecture and art for a very long time and I personally find that using this number is a shortcut to making spacing look good in just about anything, right, so that gives you the basics of working with margins and line-height to control vertical spacing with typography. Now, you might have noticed something interesting here with our line-height and that is that we did not include a unit. We didn't include px for pixels or rem or or any other unit. And that's because your decision to use a certain type of unit or to not use any unit at all can have a significant effect on how your entire page functions. So next lesson, we're going to talk about the units that you can use in typography and when you should choose which type of unit and for what reason. So I'll see there.

Back to the top