Question

我添加了相关的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>

Answer 1

您需要添加此CSS：

ul,p {
    margin:0;
}

<强> FIDDLE

我还建议您使用som类型的CSS重置样式，例如this one或this one。

Answer 2

这是因为保证金崩溃。

为什么标题和部分之间存在差距？

2 个答案: