Question

我正在做一个基于Treehouse项目的练习网站，我遇到了一些问题。我已经设计了一个标题元素，到目前为止，我所做的一切都很好，我唯一的问题是当我向左移动元素时，我会在页面顶部找到一个边距。如果没有浮动元素，元素就会很好地贴在浏览器的顶部。导致此保证金出现的原因是什么？我正在使用normalize.css，我的代码如下：

    <header>
        <a href="index.html" class="logo">
            <h1>Nick Pettit</h1>
            <h2>Designer</h2>
        </a>
        <nav>
            <ul>
                <li><a href="">Portfolio</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav> 
    </header>




body {
    font-family: 'Open Sans', sans-serif;
}

.wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

h3 {
    margin: 0 0 1em 0;
}


header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

.logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: "Changa One", sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-size: .75em;
    margin: -5px 0 0 ;
    font-weight: normal;
}

Answer 1

有一些空格：

<h1>有margin-top: 15px（由margin: 15px 0）
<header>有padding-top: 15px（由padding: 5px 0 0 0）
（*）<body>有margin-top: 8px（由浏览器内部样式表中的margin: 8px引起）

删除它们不会产生任何空间：Demo

（*）在Firefox 31上。其他浏览器可能表现不同。

为什么我的标题浮动会在页面顶部留下边距？

1 个答案: