内联之间如何摆脱不需要的空间
这个问题在这里已经有了答案：
内嵌块元素之间的空白
这听起来像你使用display: inline-block来display: inline-block列，而不是将它们浮动。
使用内嵌块进行布局的问题是，如果HTML源代码（在本例中为grid__item div）之间的HTML源代码中存在任何空格，则在显示的元素之间会添加3-4像素的水平间距。
内联块旨在将块内容添加到段落流中。 这种间距发生的原因与在段落中的2个单词之间添加3-4像素相同的原因：它在段落中给出了一系列内联元素，它们通常预期具有的间距量。
没有CSS解决方案，这是真正的跨浏览器和安全（尽管负左边距最近）。 有许多方法可以编辑HTML代码以防止出现这种情况（消除源代码中标记之间的空白），但它们存在可维护性问题（在其他人工作时出现难以识别的问题的风险很高代码），并且它显着地破坏了内容和表示的分离（假定对源代码格式的更改会影响显示页面的格式）。
内联块和浮点的比较
浮动和内嵌块的缺点是不能用于一般布局（例如，在页面流中创建可变高度的列）。 有人可能会认为，CSS定位和HTML表格不适用于总体布局（或者至少不适合它）。
各自的自然用途：
从历史上看，由于缺乏其他选项，这些都被迫用于布局。 正如Eric Meyer在这里和这里指出的那样，漂浮在布局上的理由是因为能够清除漂浮物（这允许以更多种方式使用漂浮物）。
选择正确的工具
因此，如果没有人打算进行总体布局，您如何选择最佳的使用方式？
总体而言，反对内联块的最强论据是，如果它真的适合总体布局，那么不会有像元素之间添加的3-4像素水平间距这样的基本问题（这几乎是不需要的在布置页面的主要区域时，列不应与文本段落中的文字相同）。
在特定情况下，可以应用一个简单的规则：对于那些3-4 px产生问题的情况，这表明使用内联块是不合适的。 同样，对于3-4 px不会产生问题的情况，这表明它可能是一个合理的选择。
在实践中，我发现浮动比内联块更可靠和可预测，特别是在早期版本的IE中。 浮动的主要麻烦是不得不手动清除它们。 为CSS文件添加一个可靠的clearfix使得这样做相对易于管理。 即使在现代的CSS网格系统上，建立列的首选布局机制通常是浮动的（基于我目前看到的）。
这是我搜索“内联之间的空间”时的第一个链接：http://css-tricks.com/fighting-the-space-between-inline-block-elements/
tl; dr删除列之间的空格。
这个问题是由内嵌块元素被视为单词引起的 - 所以可以通过给包裹元素提供负面的单词间距来模拟。 关于word-spacing: -4px; 为我工作Chrome / IE9 / FF :) - 然而 - 记住 - 这是一个解决方法。
HTML：
<div class="wrapper">
<div class="inliner">01</div>
<div class="inliner">01</div>
<div class="inliner">01</div>
</div>
CSS：
.inliner{ display: inline-block; }
.wrapper{ word-spacing: -4px; }