内联块级元素的空格修复无效

Question

我正在尝试使用内联块创建“浮动”列（因为我厌倦了用清除浮动向左浮动）。我在任何地方阅读时都会发现，消除内联块中的空白空间的方法是使用word-spacing: -4px或负边距-4px。但是，对于我来说，-4px无法解决问题。为什么会这样呢？

请参见Chrome中100%浏览器缩放下可见的微小空白间隙：

请参见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修复，但我不确定这会引入什么新问题。

- tuco

---

这与您使用的字体的空格字形度量以及浏览器解析子像素值的方式有关，因为4px只是常见比例间距字体的近似值。 - Alohci

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>

- Alex Char

---

我可以说我更喜欢在父元素上使用font-size:0。为子元素指定字体大小可能会变得有点烦人。通常我会添加 parent-element * { // 重置字体大小 }。 - Vian Esterhuizen

我不准备使用Flex，因为浏览器支持的问题。我将尝试使用font 0进行实验，我想确保这里列出的Safari bug不再是一个问题：http://css-tricks.com/fighting-the-space-between-inline-block-elements/ - tuco

PS. 5像素的修复可以解决问题，但我不确定这会引入什么新问题。 - tuco

我的建议是使用 float。 - Alex Char

Answer 2

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

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

- GSaunders