Question

我在网络上找到了一些答案，人们已经指示删除网页顶部空间的方式通常是某种形式：

body {
    margin: 0;
    padding: 0;
}

来源：How to remove blank space on top of page?

请查看我目前正在设计样式的网页：http://web.p0orvmwy7k.treehouse-app.com/

我已经确定在header元素上声明float: left;会产生页面顶部的空格。我跟随树屋的样式教程，他们声称现在没有效果，但在扩展到网站的桌面版本时会发挥作用。

自教程编制以来已经有几年了，所以关于浏览器的事情可能会有所改变，但我只是想知道是否有人可以向我解释为什么浮动header元素会产生当主体没有填充或边距且标题没有上边距时，页面顶部的空格？

Answer 1

对于整个margin-top元素，h1锚标记logo内的margin:8px默认为body。使用下面的css删除margin-top代码的h1。

#logo h1{
    margin-top:0;
}

要减少margin top，请进一步使用：

body{
    margin-top:0;
}

Answer 2

我建议在设计网页时使用RESET.css来避免此类问题。您可以在网页中包含以下reset.css。这些css是众所周知和经过测试的

  /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

有关reset.css的更多详情，请访问： - http://meyerweb.com/eric/tools/css/reset/

一旦你申请reset.css

，请告诉我们

Answer 3

您的标题元素上的float：left是导致此行为的原因！

在CSS文件的最底部放置：

header{float:none;}

请确保不要在标题前添加点或标签。

Answer 4

保证金由#wrapper section p引起。删除该特定元素的边距，你应该没事。

或按照建议，不要float header。

你的footer仍然会遇到同样的问题：如果你要对background-color申请p，那么孩子的底部也会有一个缺口 - {{1} }。在这种情况下，您使用clear会导致与header相同的行为。

一般情况下，我建议您更好地了解如何以及在何处使用float和clear ...... http://css-tricks.com/all-about-floats/应该是一个好的开始;）

使用float时如何删除页面顶部的空格？

4 个答案: