Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) The Box Model Margins

TzeYang Chew
TzeYang Chew
12,039 Points

why use line height on h1 or h2 when there is no in between text?

why use line height on h1 or h2 when there is no in between text? what is the reason for using line height on the headline? can i use line height as margin or margin as line height?

2 Answers

Steven Parker
Steven Parker
229,787 Points

The line-height setting will affect the height of the content area of a heading element. It's not the same thing as margin, since the margins are outside of the element's "box".

Try applying a colored background when using line-height vs. margin and you'll see the difference immediately.


UPDATE: I see you added two examples. They illustrate the difference, but perhaps it would be more clear if the spacing were the same in both examples and the line-height and margin were the only things different. Here's another set of examples that may work better. So, using this HTML:

<h1>test heading</h1>
<h1>another heading</h1>
<h1>and a third</h1>

... compare this CSS setting:

h1 {
  font-size: 40px;
  background-color: blue;
  color: white;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;  /* line-height, but no margin */
  margin: 0;
}

... to this one:

h1 {
  font-size: 40px;
  background-color: blue;
  color: white;
  text-transform: uppercase;
  font-weight: normal;
  line-height: normal;
  margin: 6px 0 0;  /* margin, but no line-height */
}

You'll see that the spacing between the h1 lines is the same, but in one example, the colored backgrounds are continuous, and in the other, they are broken up by white areas. That's the difference between using line height and margin to achieve spacing, how much of area is part of the content. Without the colored background, you would not be able to see the difference.

There's no reason to use line-height if you only want to adjust position.

TzeYang Chew
TzeYang Chew
12,039 Points

Hi,

I understand that line height will effect the height of the content area while margins will effect the outside the element box.

But can i use only margin to move up the headline without putting the line height? or is there a reason for putting the line height?

h1 { font-size: 5.625rem; /* 90px/16px color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3;background-color: green;
text-shadow: 0px 1px 1px rgba(0,0,0, .8); margin: 12px 0 0; background-color: blue; }

I find that i can just use the margin to move up the headline without putting the line height.So what is the difference?

h1 { font-size: 5.625rem; /* 90px/16px color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; text-shadow: 0px 1px 1px rgba(0,0,0, .8); margin: -12px 0 0; background-color: blue; }

Steven Parker
Steven Parker
229,787 Points

I expanded my answer, perhaps it will be clear now.