javascript - Flush CSS box alignment

Question

I am practicing CSS with Masonry. I'm doing a bit of basic testing and seeing how everything gets displayed. However I am not sure how to fix this problem. I want to fit all of my pictures inside the .masonry class in my CSS but there is this little bit of space that occurs and I'm not sure how to fix it. I want all the boxes to be flush and no white space to be displayed between each box.

Here is the codepen:

http://codepen.io/anon/pen/Cpedg

my CSS:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.masonry{
  margin: 0 auto;
  background: #EEE;
  max-width: 80%;
}

.masonry .item,
.masonry .grid-sizer {
  width:  20%;      /*item default width of 20%*/
  margin: 0px;
}

.masonry .item,
.masonry .grid-sizer {
  height: 60px;    /* default hieght of image*/
  float:  left;

  background: #D26;
  border: 1px solid #343;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

.item.w2 { width:  40%; }           /* changes each item to these chracteristics*/

.item.h2 { height: 100px; }
.item.h3 { height: 130px; }
.item.h4 { height: 180px; }

my HTML:

<h1>Masonry - columnWidth</h1>
<div class="masonry js-masonry"  data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item" }'>
  <div class="grid-sizer"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item w3"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h3"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item w2 h2"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h3"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

Answer 1

您可以通过向（从）您的身体添加（或更确切地说是删除）边距和填充来删除单元格之间的这些空间，如下所示：

body {
    font-family: sans-serif; 
    margin: 0;
    padding: 0;
}

这是左上箭头的可能解决方案，但我不太确定第二个箭头的问题是什么？

Answer 2

所以事实证明谷歌浏览器的缩放有时有点时髦。重新调整一切的快速修复是按下ctrl + 0重新调整一切！