无法获得页面的全宽度，图像div大小不正确

Question

我举了一个代码笔的例子来解释：

http://codepen.io/djnutron/pen/gPJzGJ

基本上，我想知道为什么html和body标记不能全宽显示。我的屏幕是1920x1080，但html标记拒绝为1920-出于某种原因，它总是指向1903？知道为什么吗？此外，img标记的父div还在某处添加了一些填充内容，因为img的宽度是1900，而周围的div是1903？我想知道这种填充是从哪里来的？我尝试添加display:block，以及vertical-align:top到图像，但没有骰子。。。

代码如下:

超文本标记语言

<div class="gallery"  >
  <div class="gallery-cell">
    <div class="innerG">
      <img src="http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg" />
    </div>
  </div>
  <div class="gallery-cell">Lorem ipsum dolor sit</div>
</div>

断续器

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

* {
  box-sizing: border-box;
}

.gallery-cell {
  padding: 0;
  margin: 0;
}

Answer 1

您可以尝试将HTML和Body都设置为< code > width:100%；

有没有比窗口高度更长的内容？如果有，可能是Silviglen所说的滚动条。

Answer 2

如果你想一直拥有完整的< code>body宽度，你可以在CSS中设置它:

html, body {
  padding: 0;
  margin: 0;
  min-width: 1920px;
}

Answer 3

我相信情况就是这样：

滚动条宽17像素

此外，您称为“innerG”的div是显示块，因此它具有整页的宽度。没有填充隐藏在任何地方。：）

只需缩小，您就会看到它的大小正在发生变化以匹配屏幕宽度