内联块空格修复不起作用

Question

我正在尝试使用内联块创建“浮动”列（因为我厌倦了使用clearfix向左浮动）。 在我读到的任何地方，使用内联块去除空白区域的方法是使用word-spacing : -4px或word-spacing : -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>

CSS：

.content-wrap {word-spacing : -4px;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 {
    display: inline-block;
    vertical-align: top;
    background-color:#eee;
    padding:0;
    margin:0;
}

.col9 {width: 50%;}

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

Answer 1

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

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

1）使用float: left解决方案float: left而不是display: inline-block

 .content-wrap { word-spacing: -4px; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 { display: inline-block; vertical-align: top; background-color: #eee; padding: 0; margin: 0; font-size: 16px; } .col9 { width: 50%; } .row{ font-size: 0; } 

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

2）使用font-size: 0解决方案font-size: 0表示父亲和希望孩子：

 .content-wrap { word-spacing: -4px; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 { display: inline-block; vertical-align: top; background-color: #eee; padding: 0; margin: 0; font-size: 16px; } .col9 { width: 50%; } .row{ font-size: 0; } 

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

3）使用flex解决方案：

 .content-wrap { word-spacing: -4px; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 { display: inline-block; vertical-align: top; background-color: #eee; padding: 0; margin: 0; } .col9 { width: 50%; } .row { display: flex; 

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

Answer 2

只需使用浮点数，你也可以清理你的css并选择所有以'col'开头的列，就像这样。

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