为什么标题和部分之间有间隙？答案

【问题标题】：Why is there a gap between header and section?为什么标题和部分之间有间隙？
【发布时间】：2014-04-30 13:10:58
【问题描述】：

我已经添加了相关的 HTML 和 CSS

我将页眉的边距设置为0 auto，但页眉和节之间仍有空白。怎么会？

像0 5和15px这样设置边距有什么区别？

这是 CSS 代码：

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>

【问题讨论】：

没有您的代码，我们将无法为您提供帮助...
可能是边框，部分可能有边距，或其他。如果不查看您的代码，我们无法判断
设置margin like 0 5表示margin-top和margin-bottom为0，margin-right和margin-left为5。设置margin: 15px;表示link 周围的边距为 15 px。部分在您的标题下方，对吗？也许部分有一个上边距。
@web-tiki 添加了它..
太好了，我们快到了，需要 CSS但是我们还需要您的 HTML 代码，因为我们无法猜测元素在标记中的排列方式。跨度>

标签： css frontend

【解决方案1】：

你需要添加这个 CSS ：

ul,p {
    margin:0;
}

FIDDLE

我还建议您使用某种 CSS 重置样式，例如 this one 或 this one。

【讨论】：

非常感谢！欣赏！
@JackYuan 很高兴我能提供帮助，如果有帮助，请不要忘记投票/接受答案。更多信息在这里：stackoverflow.com/about
@JackYuan 现在你知道如何提问了，所以如果再问一些问题，代表就会来。但是您仍然可以通过单击对勾（此答案的左上角）来接受答案。
我想知道为什么这是解决方案......因为间隙在部分和标题之间，为什么不能是标题，部分{边距：0;}@web-tiki跨度>
@JackYuan 如果您想了解折叠边距，可以查看这篇文章sitepoint.com/web-foundations/collapsing-margins 或这篇文章developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing。

【解决方案2】：

这是因为边距塌陷。

【讨论】：