具有内联块的元素中的不同边距

Question

我正在将div从float:left切换到inline-block，并且不知道为什么有些div会移位，就像他们有一些看不见的边框或其他东西。

以下是float:left https://jsfiddle.net/f7op4dze/

div{
    background-color: red;
    width: calc(25% - 40px);
    height: 50px;
    float:left;
    margin:0 20px;
}

此处有inline-block https://jsfiddle.net/dfdxa5hc/

div{
    background-color: red;
    width: calc(25% - 40px);
    height: 50px;
    display:inline-block;
    margin:0 20px;
}

Answer 1

有一个空格会自动添加内联元素，此空间也会应用于inline-block。

如果标记中的元素之间没有空格（空格或返回），则内联块元素将在没有空格的情况下呈现。

执行此操作并保持最佳格式设置的最简单方法是在<div>元素之间使用注释标记，如下所示： https://jsfiddle.net/orvn/wd0ynq98/2/

<section>
     <div></div><!--
  --><div></div><!--
  --><div></div><!--
  --><div></div>
</section>

Answer 2

作为解决问题的一种可能选项，请将父级的font-size设置为0。

section { font-size: 0; }

您可以恢复子元素的字体：

div { font-size: 16px; }

演示：https://jsfiddle.net/dfdxa5hc/3/

有关解释和其他可能的解决方案，请参阅我的答案：

• inline-block boxes not fitting in their container

Answer 3

最后有CSS only solution to this problem

section {
  display: table;
  word-spacing: -2em;
  width: 100%;
}

div {
  display: inline-block;
  word-spacing: normal;
}