无法对齐内联块元素的相邻边缘以进行触摸

Question

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

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

Answer 1

解决方案是将 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>

无法对齐内联块元素的相邻边缘以进行触摸

Cannot align the adjacent edges of inline-block elements to touch

html

css

margin

display