两个相同大小的元素显示不同的宽度答案

【问题标题】：Two same sized elements displaying different width两个相同大小的元素显示不同的宽度
【发布时间】：2017-09-12 21:37:01
【问题描述】：

我正在布置一个网站设计，但我遇到了一个错误...

html元素被分配了800px的固定宽度，body元素ID'page'无论如何都不会占据100%的宽度？

这是代码...

<html>
<body id="page" >
    / content /
</body>
</html>


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

#page {

}

我尝试将#page 设置为'width:800px'、'width:100%'、'margin:0'、'margin:0 auto'等，但无论如何总是有1px的间隙#page 的右侧。我什至尝试设置'width：801px'但不起作用，以及将相对位置设置为左1px以防它因某种原因向左溢出，但它不是......

我错过了什么愚蠢的东西，是我使用的程序有问题，还是其他什么？我来自哪里，800px 和 800px 一样，这是怎么回事？

谢谢大家……

编辑：所以，回顾以前的项目，我发现什么对我有用。无论是我正在使用的程序（免费），还是我缺少的东西，这对我有用，从而解决了我的问题。

<html>
<body>
/ content /
</body>
</html>

html {
    width: 800px;
}

body {
    margin: 0;
}

【问题讨论】：

你确定没有应用边框吗？
刚刚开始造型，这就是我目前拥有的所有 css...

标签： html css

【解决方案1】：

可能有一些额外的 css 偷偷溜进某处。检查 #page 元素上的任何 border 属性。

运行这个 sn-p，不应该有一个像素间隙。

html {
  width: 800px;
  background: lightgrey;
}

#page {
  margin: 0;
  border: none;
  background: yellow;
}

<html>

<body id="page">
  / content /
</body>

</html>

【讨论】：

上面显示的 css 实际上就是所有内容，但不幸的是，我尝试了您的建议，但没有成功。

【解决方案2】：

您似乎遇到了浏览器将滚动条注入页面的方式不一致的问题，请参见此处：

Styling the `<html>` element in CSS?

我会首先使用像 normalize.css 这样的 css 重置来获得跨浏览器的行为一致性，然后从那里使用您的自定义样式。就我个人而言，我从不设计 html 元素的样式并从正文向下工作。像这样工作我不会遇到这类问题，因为它们是由 normalize.css 处理的。

【讨论】：

我以前从未遇到过这个问题，因此（现在）不需要重置 css。我回顾了以前的作品，发现样式只有通过设置 html 的宽度和 body 的 0 边距才对我有效。我会用“答案”更新我的帖子。
好的，但不妨试一试：删除您自己的 html 样式，添加规范化器，然后根据需要设置样式。如果您从正文向下设置样式，则 normalize.css 应确保您的 html 元素的行为正确。