无法对齐内嵌块元素的相邻边缘以使其接触

问题描述

我刚刚尝试在代码中使用CSS display: inline-block创建3个并排的列。我将margin和padding设置为0，但是列的边缘没有接触（我将元素边框化以可视化效果）。就像给margin提供了一些默认display: inline-block一样。
如何在不使用-ve display: inline-block或绝对值的猜测值的情况下对齐margin元素的边缘定位。

<div>
  <div style='display: inline-block;'>apple</div>
  <div style='display: inline-block;'>ball</div>
  <div style='display: inline-block;'>cat</div>
</div>

解决方法

解决方案是将font-size: 0添加到父元素，然后在子元素上声明默认的font-size。

ul {
    font-size: 0;
}
li { 
    display: inline-block;
    width: 100px;
    font-size: 15px;
}

li:nth-child(1) {
    background: #f33;
}
li:nth-child(2) {
    background: #3f3;
}
li:nth-child(3) {
    background: #33f;
}

    <ul>
        <li>element 1</li>
        <li>element 2</li>
        <li>element 3</li>
    </ul>