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) Enhancing the Design With CSS Web Fonts with @font-face

Marc Lim
Marc Lim
7,705 Points
Posted by Marc Lim
Marc Lim
7,705 Points

line-height for h1 no longer required after margin added?

At the end of the video, our h1 declaration ends up as follows:

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

In this case, does leaving in the line-height serve any purpose? Also, would mean that without a margin declaration, the line-height will serve as the margin?

Florian Hammer
Florian Hammer
1,830 Points
Florian Hammer
Florian Hammer
1,830 Points

If the h1-line will break (smartphone, tablet), you need the line-height to define the distance. Why did you choose to use px for your margin?

Marc Lim
Marc Lim
7,705 Points
Marc Lim
Marc Lim
7,705 Points

@Hammer, Well I was just following along with what I got from the video tutorial :p. Couldn't seem to figure out what line-height was affecting.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

px arent bad, % shoudnt be always used or ems etc..

and you have line-height without any value .

2 Answers

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

I think what it is is the line-height is making the line of the h1 aligned properly. Margin or paddings, will make things different.

Lets say for example i have navigation thats 50px in height, if i put line-height 50px , the text will be vertically aligned in the middle of the 50px. If i put paddings, i will move the inside of it and if i pu margin it will move the whole thingy or something like that. The best would if you had a play around with it.

Marc Lim
Marc Lim
7,705 Points
Marc Lim
Marc Lim
7,705 Points

Hmm.. I think I might been confused with the margin property and line-height property, in terms of the roles they serve. Yeah, I've been playing around with the DevTools on chrome to figure out why margin: 12px 0 0; had the affect that it had at the end of the video.

I might have wrongly suspected line-height having a role to play. However, now I even more confused as on how to measure the total height of an block-element. Maybe further videos might clear up the positioning-blank i'm having now.

Florian Hammer
Florian Hammer
1,830 Points
Florian Hammer
Florian Hammer
1,830 Points

it's the distance between two lines. ;-) If you want really dig deep into typography, i suggest you read Matthew Butterick Practical Typography.

Marc Lim
Marc Lim
7,705 Points
Marc Lim
Marc Lim
7,705 Points

Sweet, I'll make a note of that. I'm just starting out with CSS, can't wait to be able to incorporate typography aspects into it. Thanks for the advice! Cheers.