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

Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points
Posted by Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points

Why there is a white space above header?

Everytime that i use a h1 in a header, i suddenly get some space above the whole section. I do think that is margin, but even with h1 {margin:0) the space remains.

I found out, diggin online, that if i target the first child of the h1 and put his margin-top to 0, the space simply disappears. I'm really happy about it, but i still need to understand how does it work.

Ah: even if i target the first-child, i usually don't have one in the markup. So this is even more strange. I have an effect targeting an element that does not exist in my html.

8 Answers

eck
eck
43,038 Points

Try adding this CSS and let me know if your problem remains:

body {
  padding: 0;
  margin: 0;
}
eck
eck
43,038 Points
eck
eck
43,038 Points

If a parent element does not have any top padding or less top margin then its first child, then elements are rendered in a way that makes the parent element appear to have the child element's margin. So this can happen anywhere on a page where this conditions are met, but it tends to be most obvious at the top of a page. I hope that made sense >.<

So the solution is to avoid a top margin for that first child element or to give the parent top padding (overflow: hidden can also get a decent result, but I think the other options are better)

As for the why of it, check out this article.

Hope that helps!!!

Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points
Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points

Thanks Erik, but the problem is that in my case the h1 don't have any child. Still, when i target his first child, i have an effect. Even if it does not exist on my html. That's the strange point. Why i have an effect targeting something that do not exist in my markup?

eck
eck
43,038 Points
eck
eck
43,038 Points

Don't target :first-child, just remove the top margin for your h1 and see if that helps.

If that doesn't work or make sense to you, post your HTML. I can give you more educated suggestions on specifically how you might fix this problem.

Shaun Kelly
Shaun Kelly
35,560 Points
Shaun Kelly
Shaun Kelly
35,560 Points 
html, body {
margin: 0 auto;
}
eck
eck
43,038 Points

Can you post your HTML too, please? :)

Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points
Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points

Thanks for the reply Erik. Ok, i experimented a little bit more and now i do understand why i was having that problem with first-child; nonetheless i still can't get rid of the white space above my header. Here's my code.

Stylesheet:

header {background: black; color: white; margin: 0; padding: 0; display: fixed}

h1{ margin: 0; padding: 0; }

html

<!doctype html>
<html lang=en>
    <head>
        <meta charset="utf-8"  />
        <link rel="stylesheet" type="text/css" href="main.css"  />
        <title> Esempio </title>
    </head>
    <body>
        <header>
            <h1> Stuff </h1>
            <ul>
                <li>One</li>
                <li>Two</li>
            </ul>
        </header>


    <body>
<html>

            ```
Miroslav Kovac
Miroslav Kovac
11,454 Points
Miroslav Kovac
Miroslav Kovac
11,454 Points

I solved this with adding

h3 { margin: 0; padding: 0; }