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.

CSS

Soufiane Bdaoui
Soufiane Bdaoui
9,601 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

Erik Krieg
Erik Krieg
43,038 Points

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

body {
  padding: 0;
  margin: 0;
}
Erik Krieg
Erik Krieg
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,601 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?

Erik Krieg
Erik Krieg
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.

html, body {
margin: 0 auto;
}
Erik Krieg
Erik Krieg
43,038 Points

Can you post your HTML too, please? :)

Soufiane Bdaoui
Soufiane Bdaoui
9,601 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,440 Points

I solved this with adding

h3 { margin: 0; padding: 0; }