网页边上的空格

Question

在下面的代码中，我将页面宽度设置为980px，在右侧出现了一些空格，当将body width设置为1050px时，这些空格将消失。我的屏幕分辨率是1366x768，我读到过大多数网站都有950px到980px的宽度，而像facebook这样的大多数网站完全适合我的屏幕，那么为什么我的980px在右边有空格。

​

body {
  width: 980px;
  overflow: scroll;
}
#container {
  width: 100%;
}
.one {
  height: 200px;
  float: left;
  border: 1px solid red;
  width: 25%;
  box-sizing: border-box;
}
.two {
  height: 200px;
  display: inline-block;
  border: 1px solid blue;
  box-sizing: border-box;
  width: 50%;
}
.three {
  height: 200px;
  float: right;
  border: 1px solid green;
  box-sizing: border-box;
  width: 25%;
}

<div id="container">
  <div class="one">this is first block
  </div>
  <div class="two">the content changes it's position on zooming in
  </div>
  <div class="three">Is there any way to keep it as it is with a scroll bar
  </div>
</div>

​

Answer 1

您是否尝试过将html或body的边距设置为0？

像这样：

html, body {
  margin: 0;
}

JSFiddle

编辑:空白被设置为html的默认页边距，所以如果你想让你的页面“无边框”，你只需要将html的页边距设置为0 (为了安全起见，你永远不会知道不同的浏览器会做什么)。

Answer 2

尝试取消设置宽度，看看会发生什么。我没有在我制作的字体上设置页面宽度，它工作得很好。现在，如果我有一个盒子，一个表格，一个阴影盒子等等，我会为它设置尺寸，但我从来没有指定过页面宽度。也许只需将其注释掉，刷新，看看会发生什么。