Question

我有一个网站：http://www.southwoldholidayhomes.com/，您可能会看到在内容开始之前页面顶部有25个左右的差距。

原始代码/布局是从以前的网页设计公司继承而来的，除了这个问题之外，不符合我的标准，但效果还不错。

我想减少这个页面顶部的差距 ，但我找不到宣布它的内容 。

我已经在body / html元素上设置了规则，以使margin / padding为零。
我在SO上看过各种类似的问题，似乎都表明它是按照第一点设置边距/填充。在这种情况下，我不认为这是原因。
FireBug无法选择屏幕区域但确认我的DIV，Body和HTML元素的填充/边距为零。
Gap是在Chrome，Firefox和IE上出现的跨浏览器（因此它不是firebug / firefox特定的问题）
我删除了各种隐藏元素，例如页面顶部的谷歌分析<script>和页面顶部的微数据内容<div>，但这些元素不更改此布局问题。

下面是略微简化的CSS和HTML布局。页面布局确实使用灯箱，但CSS似乎不会干扰单个文件中的页面布局CSS。

CSS

html {
        margin: 0 !important; ///used for problem solving, not on original.
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    margin:0;
    padding: 0;
    color: #111F35;
    font-size: 16px;
    font-weight:400;
    /*line-height: 1.4;*/
    background-color:  #BACDC7;
}
.containX, .container {
    width: 61.875em;
    max-width:990px;
    background: #FFF;
    margin:0 auto; ///used for problem solving, not on original.
    padding: 0;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>
...
</head>
<body>
** GAP APPEAR HERE **
<div class="containX" id="container">
<script type="text/javascript">
/** Google analytics stuff only ***/
</script>
<div itemscope itemtype="http://schema.org/LocalBusiness" style="display:none;">
<span itemprop="image">http://www.southwoldluxuryholidayhomes.co.uk/images/head1.jpg</span>
<span itemprop="name">Far View Holiday Homes Southwold</span>
<span itemprop="description">Far View are a high quality 4 star experience, with a Gold Award from Visit England. These Self-catering apartments overlook Southwold Common, on the Suffolk Heritage Coast.</span>
</div>
  <div class="header" >

编辑：我知道我错过了一些愚蠢的东西，但对于未来的读者 - 检查所有下页元素的top-margin CSS !!

Answer 1

如果您使用Chrome开发工具进行检查，则可以看到h1中的.header已应用了保证金。删除该边距为我修复了它。

把它放在你的CSS中：

.header h1 {
  margin-top: 0;
}

Answer 2

这是由标题中的H1引起的。要解决，

.header h1 {
  margin-top:0;
}

Answer 3

标题div内部的h1标签的上边距为1.em ...这就是推动内容下降的原因

Answer 4

选择margin-top: 0.6em;位于http://www.southwoldholidayhomes.com/css/stylesdw2.css第73行的

样式规则.header h1

网页顶部的神秘缺口

CSS

HTML

4 个答案: