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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Rahul Ram
Rahul Ram
2,872 Points
Posted by Rahul Ram
Rahul Ram
2,872 Points

Padding with px vs Padding with %

So, I am kind of a neat freak, so back when Nick was teaching us about adding fonts, It was very painful for me to see the website as it was, so I added this bit of code here :-

h1 { font-family:'Alex Brush', Cookie; margin: 15px 0 8px; font-size:3em; font-weight:normal; line-height:0.8em; padding-top:1.75%; }

It made the logo (which was the H1) make a good amount of space between the top and the bottom, and it looked pretty nice overall.

a few videos later, Nick started with another cleanup process and started adding this code:-

header { float:left; margin:0 0 30px 0; padding:5px 0 0 0; }

So now my question, in the end both of us had same results. Apparently the white border on top was something I choose to keep and I could have removed it from within my code.

If I am not wrong padding-top property should be more effective because it will be more effective because it will resize according to the % value. (right?)

Unless i want to add another H1 to the page, what other adverse effects can my code have on my page.

I mean Nick is he instructor here, so ofc he is taking the best way out. So I would like to get your views on where I am going to mess up if I use my code over Nick's.

Thankyou.

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

A percentage value on top/bottom padding or margins is relative to the width of the containing block. For this reason, percentage height is generally not used for a top padding. But if that's the effect you really want, go for it.

Now, if you want the first header to receive a different styling than h1's later on, instead of styling the h1 tag itself, give that h1 a class and use the class as your style selector. Your first header will look the same, but any h1's later in the page will get the default style.

code.html 
<h1 class="first_header">The Heading</h1>
styles.css 
.first_header {
    font-family: 'Alex Brush', Cookie;
    margin: 15px 0 8px;
    font-size: 3em;
    font-weight: normal;
    line-height: 0.8em;
    padding-top: 1.75%;
}