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

Posted by Michael Streubert
Michael Streubert
985 Points

Why does the arrow appear about 60px below the end of the H1 padding?

On this lesson:

This lesson

I can't find any margin settings for either the arrow or the H1 element to appear so far apart. I know this isn't part of the lesson, but I'm trying to test myself by moving some of Gil's elements, yet I can figure out how to put the arrow img closer under the H1 title.

peyton caseria
peyton caseria
Courses Plus Student 12,281 Points

I am on my mobile device, I can look into this for you tomorrow.

Did you use the chrome inspect element dev tool and check for any other css attributes that might be taking over?

If so, you can make another style attribute overlap.

This is useful with frameworks such as bootstrap and materialize.

Typically when I want to test code it is best to use a full text editor like sublime text.

2 Answers

Unsubscribed User
Unsubscribed User
11,811 Points

The approx 60px space is coming from this css in the "user agent stylesheet" - meaning it is default css for the chrome or safari or firefox browser. Every browser has slightly different default values.

To disable the default styling in your own designs, you'd have to include the reset.css or normalize.css stylesheet. Google those to find them. This is good practice in web design, as you'll have a blank slate across all browsers and that'll help your design have a consistent look across all browsers.

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
Michael Streubert
Michael Streubert
985 Points
Michael Streubert
Michael Streubert
985 Points

Thanks Sarah, that makes sense.

Unsubscribed User
Unsubscribed User
11,811 Points

Glad I could help. I remember when I was learning, that would frustrate me to no end!!! Here's the links to the normalize.css and to reset.css. The most commonly used is normalize.css and it's usually just placed as a link to an outside file hosted on a CDN to serve up the most recent version lightening fast.

I always use: 

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

Hey, I'd appreciate if this was helpful to you, to mark my original answer as the 'Best Answer'. This will help me fulfill my forum contribution goal in my career track goals. :) Thanks!!