无法获得页面的完整宽度和图像 div 的大小不正确

Question

我已经放了一个codepen例子来解释：

基本上，我想知道为什么 html 和 body 标签不会全宽。我的屏幕是 1920x1080，但 html 标签拒绝为 1920 - 由于某种原因它总是转到 1903？知道为什么吗？ img 标签的父 div 也在某处添加了一些填充 - 因为 img 是 1900 宽而周围的 div 到 1903？我想知道这个填充是从哪里来的？我尝试将 display:block 和 vertical-align:top 添加到图像中，但没有骰子...

代码如下：

HTML

<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>

CSS

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

* {
  box-sizing: border-box;
}

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

Answer 1

我相信是这样的：

The scrollbar is 17 pixels wide

还有你叫"innerG"的div是显示块，所以它有整页的宽度。任何地方都没有隐藏填充。 :)

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

Answer 2

如果你想一直有完整的 body 宽度，你可以在 CSS 中设置：

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

Answer 3

您可以尝试将 HTML 和 Body 都设置为 width: 100%;

有没有比window的高度还长的内容？如果是这样，可能就是Silviagreen所说的滚动条。

无法获得页面的完整宽度和图像 div 的大小不正确

cannot get full width of page and image divs arent sized properly

html

css

padding

width