CSS CSS Basics 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
200,784 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
200,784 Points

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