如何在 HTML5 中将 DIV 标记图像放在页面的最顶部？答案

【问题标题】：How do I place a DIV tag image on the very top of the page in HTML5?如何在 HTML5 中将 DIV 标记图像放在页面的最顶部？
【发布时间】：2011-02-09 22:51:39
【问题描述】：

我试图通过在 CSS 中使用背景图像，然后在 DIV 标记中使用 id 来放置图像的 x 重复“网格”。我的意图是放置一种“面板”，然后始终延伸到页面的最顶部，并使用 repeat-x 循环。它在没有 DOCTYPE 的情况下工作得很好，但是当我将 clean 放入代码中时，它会将标签中的图像向下推，好像页面顶部有大约 15 px 左右的边距。我尝试了上边距、z-index，但没有成功。

如果我问了一个愚蠢的问题，请原谅，但我是新人。

谢谢， -雅各布

【问题讨论】：

标签： html border doctype margin

【解决方案1】：

所有现代网页都需要文档类型。当您没有盒子模型时，这听起来像是在与盒子模型作斗争。没有 doctype，你就处于怪癖模式，一切都乱套了。

【讨论】：

【解决方案2】：

您的描述有点不清楚您使用哪种方法将面板放在页面顶部，但在我看来，您的面板 div 被放置在您的 HTML 代码中 body 元素的最顶部，例如这个：

    <body>
          <div id="yourid">
[...]
          </div>

如果是这种情况，您可能会遇到浏览器中 body 和/或 html 元素的边距和/或填充的默认设置（以及它们在浏览器模式之间的差异 - 即使用或没有 doctype - 在某些浏览器中）。

这些默认设置因浏览器而异 - 解决该问题的常用方法是重置它们 - 例如如下所示：

html,body {margin:0; padding:0}

如果这对您没有帮助，请提供更多详细信息（即代码或受影响页面的链接）

【讨论】：

【解决方案3】：

如果浏览器在标准模式下运行（这是您想要的，并且由良好的文档类型触发），那么<body> 元素上会有一些边距或填充。使用body { margin:0; padding:0; } 将其清除并让您的元素填满整个屏幕。

【讨论】：