内联块空格修复不起作用

Question

我正在尝试使用内联块创建"浮动"列(因为我厌倦了使用clearfix向左浮动).在我读到的任何地方,使用内联块去除空白区域的方法是使用word-spacing : -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>

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而不是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父母的解决方案和对孩子的渴望:

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