Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
221,325 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%;
}