内线块空白修复不工作

I am trying to create "floating" columns using inline blocks (as I am sick of floating left with clearfix). Everywhere I read, a way to get rid of the white space with inline blocks is to use word-spacing : -4px or negative margin of -4px. But, for me -4px is not fixing the issue. Why is that?

我正在尝试使用内联块创建“浮动”列(因为我厌倦了用clearfix创建浮动左边)。在我读到的每一个地方，用行内块来摆脱空白的一种方法是使用字距:-4px或-4px的负边距。但是，对我来说-4px不能解决问题。这是为什么呢?

See tiny white space visible in Chrome at 100% browser zoom:

在100%浏览器缩放时，在Chrome中可以看到很小的空白:

See random spaces at 110% zoom

看到随机空间在110%缩放

My html is:

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

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%;}

EDITED: Potential solutions: -5px fixes, but I am not sure what new issues that would introduce.

可能的解决方案:-5px修复，但我不确定会引入什么新问题。

2 个解决方案

#1

Inline-block: whitespace surrounding inline-block elements becomes relevant, it behaves just like text.

Inline-block:围绕Inline-block元素的空格变得相关，就像文本一样。

I suggest three solutions to overcome this issue(probably there are more):

我建议三种解决方法来解决这个问题(可能还有更多):

1)Solution using float: left instead of display: inline-block

1)使用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)Solution using font-size: 0 to parent and desire to child:

2)使用字体大小的解决方案:0为父，desire为子:

.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)Solution using flex:

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>

#2

Just use a float instead, and you could also clean up your css and select all columns starting with 'col' like so.

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

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