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

Question

我正在将 div 从 float:left 切换到 inline-block，但不知道为什么有些 div 会移位，比如它们有一些不可见的边框或其他东西。

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

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

Answer 1

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

section { font-size: 0; }

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

div { font-size: 16px; }

有关解释和其他可能的解决方案，请在此处查看我的回答：

Answer 2

有一个 space 自动添加了内联元素，这个 space 也应用于 inline-block。

如果标记中的元素之间没有白色space（space 或 return），则内联块元素将在没有 [=21 的情况下呈现=].

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

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

Answer 3

（终于）有一个

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

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

Different margins in elements with inline-block