刷新CSS框对齐

Question

我正在用砌体练习CSS。我正在做一些基本的测试，看看一切都是如何显示的。但是我不知道如何解决这个问题。我希望将我的所有图片都放在我的CSS中的.masonry类中，但是有一点空间发生，我不知道如何解决它。我希望所有的盒子都是齐平的，每个盒子之间不能显示空白区域。

这是codepen：

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

我的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; }

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

所以事实证明谷歌Chrome的缩放有时候会有点时髦。快速修复以重新排列所有内容是按ctrl + 0重新排列所有内容！