Html 内联块空白修复不起作用

我正在尝试使用内联块创建“浮动”列（因为我厌倦了使用clearfix向左浮动）。无论我读到哪里，消除内联块空白的一种方法是使用

字间距：-4px

或负边距-4px。但是，对我来说，4px并不能解决这个问题。为什么呢

在浏览器100%缩放时，查看Chrome中可见的微小空白：

请参见110%缩放时的随机空间

我的html是：

<div class="row">
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
    </div>

编辑：潜在解决方案： -5px修复了问题，但我不确定会引入哪些新问题

内联块：内联块元素周围的空白变为 相关的，它的行为就像文本

我建议三种解决方案来克服这个问题（可能还有更多）：

1） 使用

float:left

代替

display:inline块的解决方案


.content wrap{
字距：-4px；
}
.col1，
.col2，
.col3，
.col4，
.col5，
.col6，
.col7，
.col8，
.col9，
.col10，
.col11，
.col12，
.col13，
.col14，
.col15，
.col16，
.col17，
.col18{
显示：内联块；
垂直对齐：顶部；
背景色：#eee；
填充：0；
保证金：0；
字体大小：16px；
}
.col9{
宽度：50%；
}
.行{
字号：0；
}

第1列
第1列
第1列
第1列
第1列
第1列
只需使用浮点数，您还可以清理css并选择所有以“col”开头的列，如下所示

div[class^='col'],div[class*='col']{
    float: left;
    vertical-align: top;
    background-color: #eee;
    padding:0;
    margin:0;
}

我可以说我更喜欢父级的字体大小：0。确保为子元素指定字体可能会有点烦人。通常我添加
父元素*{//reset font size}
由于浏览器支持，我还没有准备好使用flex。我将尝试使用字体0，我想确保这里列出的Safari bug不再是问题：PS.5px修复了，但我不确定会引入哪些新问题。我的建议是使用
float
。这与您正在使用的字体的空间字形度量以及浏览器解析亚像素值的方式有关，因为4px只是常用的按比例间隔字体的近似值。
div[class^='col'],div[class*='col']{
    float: left;
    vertical-align: top;
    background-color: #eee;
    padding:0;
    margin:0;
}