如何识别页面顶部的这个奇怪的空白区域？答案

【问题标题】：How do I identify this strange white space at the top of my page?如何识别页面顶部的这个奇怪的空白区域？
【发布时间】：2013-06-05 08:49:15
【问题描述】：

我希望页面顶部和徽标所在的标题之间有 60 像素的距离。但是，那里似乎已经有 16px 的空白。因此，我刚刚在页眉中添加了 44px 的 margin-top，达到了我想要的效果。

但我更愿意确定 16px 的空白来自哪里，不仅要从中学习，而且要使它更整洁：如果我可以扩大空白而不是添加任何边距，那将是理想的.

我不认为神秘空间是边距或填充......我不知道它是什么。

【问题讨论】：

标签： html css margin padding spacing

【解决方案1】：

在您的 HTML 文件中第 68 行将正文标记样式更改为：

body {
    line-height: 0;
    background: url("http://www.yoursite.com/wp-content/themes/modernist/style/../images/back_01.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    font-family: "RobotoRegular", Arial, sans-serif;
    color: #606060;
    margin: 0;
}

【讨论】：

【解决方案2】：

有一个：

<br style="clear:both;"></br>

在您的“包装器”div 中，就在“内容”div 的下方。它基本上是一个新行，它是 16px 高，因为默认字体大小为 16px。

使用浏览器的页面检查器来处理类似的事情。它是检查页面结构和外观的便捷工具。

【讨论】：

【解决方案3】：

在您的div.wrapper 中，就在您的div.header 之前，您有一个br。那是你的 16px ！

<div class="wrapper">
    <div class="content">...</div>
    <br style="clear:both;">   <!-- mysterious 16px -->
    <div class="header">

【讨论】：