html文档宽度答案

【问题标题】：html document widthhtml文档宽度
【发布时间】：2010-01-15 15:35:07
【问题描述】：

有人可以澄清如何为 html 文档设置宽度。我已经为我的 body 标签设置了宽度，甚至制作了一个包装 div 来设置宽度，但页面仍然运行几个像素宽？我做错了什么？

【问题讨论】：

我们需要源代码或更措辞更好的问题。有可能它是大约 100% 宽度元素上的边框或填充。阅读“盒子模型”。此外，使用 Firefox 和 Firebug 扩展程序或类似的开发工具来检查问题。

标签： html css

【解决方案1】：

您可能需要为 body & html 的 padding 和 margin 分配零：

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

【讨论】：

【解决方案2】：

body 标签在所有浏览器中都有默认边距。也许它缺少margin: 0px？

虽然可以按照规则去做（我不知道是不是这样），但给body 标签设置宽度对我来说听起来不合适。如果您需要将内容限制在某个区域，最好在<body> 正下方使用容器<div>。

【讨论】：

给 body 一个宽度也是完全有效的，添加一个 div 只是为了避免在 body 上设置一个宽度更糟糕，IMO - 标记中不必要的噪音

【解决方案3】：

跟进@pekka 所说的话：

body 标签在所有浏览器中都有默认边距

浏览器具有不同的默认样式，这可能解释了您看到的额外边距或填充。为了使您的 css 能够按预期运行，通常建议您重置 css。简而言之，但是在所有元素中定义某些样式，您可以消除这些浏览器的不一致，然后可以相信您的样式也会按照您的需要进行层叠。这就是为什么在 HTML 和 BODY 元素上设置边距可以消除问题中提到的额外空间。

Eric Meyer 对此有很好的想法，他的重置是我在网络上看到的最常用的重置。但是，应该注意的是，下面的扩展示例不应该在没有但的情况下使用。调整它以满足您的项目需求

Ex（来自 Eric Meyer 的重置，链接如下）：

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
 }

查看这些讨论以获得更详细的解释：

http://meyerweb.com/eric/tools/css/reset/

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

【讨论】：

你能给我们一个 CSS 重置的具体例子吗？

【解决方案4】：

元素（例如body 标签）都有默认的边距和内边距，其中许多是非零的。这可能解释了额外的像素。

html, body {
    width: 800px;
    margin: 0;
    padding: 0;
}

这是CSS Reset 的示例：其概念是消除特定于浏览器的默认设置，以便您可以控制所有浏览器的确切外观。在此增量重置中，我们消除了可能导致额外像素的两个元素的边距和填充。

【讨论】：

【解决方案5】：

body 标签的宽度

某些浏览器（例如许多版本的 Internet Explorer）不允许您在 body 元素上设置宽度。通常最好添加一个包装器 div 和样式，而不是

页面的宽度只有几个像素

您可能没有删除默认填充和/或边距（不同的浏览器有不同的默认值）

【讨论】：

填充不考虑宽度，除非有问题的浏览器是以怪异模式运行的 MSIE（您实际上不希望它是 - 使用正确的 doctype 修复它）。
我认为这是 David 的观点 - 如果身体的宽度设置为 100%，但有填充或边距，他们会在 100% 之外采取行动