gpt4 book ai didi

html - 网页顶部的神秘缺口

转载 作者:行者123 更新时间:2023-11-28 04:52:38 28 4
gpt4 key购买 nike

我有一个网站:http://www.southwoldholidayhomes.com/正如您所看到的,在内容开始之前页面顶部有一个 ~25px 的间隙。

原始代码/布局是从以前的网页设计公司那里继承来的,没有达到我的标准,但效果很好,除了这个问题。

我想减少这个页首空白,但我找不到声明它的内容

  • 我已经在 body/html 元素上设置了规则,使边距/填充为零。
  • 我在 SO 上查看过各种类似的问题,这些问题似乎都表明它是按照第一点设置边距/填充。在这种情况下,我不认为这是原因。
  • FireBug 无法选择屏幕的那个区域,但可以确认我的 DIV、正文和 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" >

编辑:我知道我错过了一些愚蠢的东西,但对于 future 的读者 - 检查 top-margin 所有 下部页面元素的 CSS!!

最佳答案

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

将其放入您的 CSS 中:

.header h1 {
margin-top: 0;
}

关于html - 网页顶部的神秘缺口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29210715/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com