Why is there a gap between header and section?

StackOverflow https://stackoverflow.com/questions/23389056

  •  12-07-2023
  •  | 
  •  

Question

I have added relevant HTML and CSS

I set margin of header to 0 auto but there is still a white space between header and section. How come?

And what is the exact difference between setting margin like 0 5 and 15px?

This is the CSS code:

header{
    text-align:center;
    background:blue;
    margin: 0 auto;
}

h1,h2{
    color:black;
}

nav a{
    color:#fff;
}

section{
    background:orange;
}

Html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jack Yuan | Web Developer</title>
        <link rel="stylesheet" href="TreeHouse/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="TreeHouse/main.css">

    </head>

    <body>

        <header>

            <a href="First.html" id="logo">
                <h1>Jack Yuan</h1>
                <h2>Web Developer</h2>
            </a>

            <nav>

                <ul>
                    <li><a href="Portfolio.html"class="selected">Portfolio</a></li>
                    <li><a href="About.html"class="selected">About</a></li>
                    <li><a href="Contact.html">Contact</a></li>
                </ul>

            </nav>
        </header>

        <section>
            <ul id="gallery">
                <li>
                    <a href="TreeHouse/Jack.jpg">
                    <p> This is me </p>
                    <img src="TreeHouse/Jack.jpg" width="500" height="400" alt="">
                    </a>
                </li>
                <li>
                    <a href="TreeHouse/Life.jpg">
                    <p> This concludes my life, lol </p>
                    <img src="TreeHouse/Life.jpg"width="500" height="400"  alt="">
                    </a>
                </li>
                <li>
                    <a href="TreeHouse/Study.jpg">
                    <p> This shows what I study </p>
                    <img src="TreeHouse/Study.jpg"width="500" height="400" alt="">
                    </a>
                </li>
                <li>
                    <a href="TreeHouse/2.jpg">
                    <p> This is what I believe</p>
                    <img src="TreeHouse/2.jpg"width="500" height="400" alt="">
                    </a>
                </li>
            </ul>
        </section>
        <footer>
            <a href="https://www.facebook.com/jackyuan.jack">
            <img src="TreeHouse/facebook.gif" alt="FaceBook Logo">
            </a>
            <a href="https://twitter.com/Jack19909100">
            <img src="TreeHouse/twitter.png" alt="Twitter Logo">
            </a>
            <p>Jack Yuan</p>
            <p>All Rights Reserved.</p>
        </footer>

    </body>
</html>
Was it helpful?

Solution

You need to add this CSS :

ul,p {
    margin:0;
}

FIDDLE

I would also suggest you use som kind of CSS reset styleshhet like this one or this one.

OTHER TIPS

It is because of margin collapse.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top