css设置了 display:inline-block 的块元素之间空白间隙处理办法

我们在html页面样式表中使用：

display:inline-block;

案例代码：

• css结构：

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container {
        width: 500px;
        margin: 100px auto;
        border: 1px solid black;
    }
    .tabs {
        width: 300px;
        font-size: large;
    }
    .tabs>p {
        width: 80px;
        display: inline-block;
        background-color: lightblue;
        text-align: center;
    }

• html结构：

    <div class="container">
        <div class="tabs">
            <p>选项卡1</p>
            <p>选项卡2</p>
            <p>选项卡3</p>
        </div>
    </div>

• 发现网页上明明没有设置间隙， .tabs 下的 p 之间出现了间隙：

• 这是为什么呢？

• 原来，html解析 inline-block 元素的时候会将元素之间的 空格、换行等 用 white-space （默认是normal,合并空白符）的方式合并成一个空白符，形成了随字体大小变化的间隙。

那么如何解决这个问题呢？

1. 使用空白注释（此方法降低html代码可读性不推荐）：

• 在有间隙的标签之间加上 <--...-->

    <div class="container">
        <div class="tabs"><!--
            --><p>选项卡1</p><!--
            --><p>选项卡2</p><!--
            --><p>选项卡3</p>
        </div>

• 效果：

---

2.在父元素上设置：font-size:0; 后，再单独设置有间隙的子元素字体大小：

    .tabs {
        width: 300px;
        font-size: 0;
    }
    .tabs>p {
        width: 80px;
        display: inline-block;
        background-color: lightblue;
        text-align: center;
        font-size: 16px;
    }

• 效果：

---

3.设置 margin 负值抵消空白区域（不推荐，掌握不好空隙宽度）

4.有间隙的元素设置 float（浮动） （极不推荐，会破坏文档流，如果使用浮动也没必要设置inline-block了）

5.设置父元素的 letter-spacing 和 word-spacing 为负值，再设置子元素为0

    .tabs {
        width: 300px;
        /* padding: 10px; */
        letter-spacing: -0.5em;
        word-spacing: -0.5em;
    }
    .tabs>p {
        width: 80px;
        display: inline-block;
        background-color: lightblue;
        text-align: center;
        letter-spacing: 0;
        word-spacing: 0;
    }

• 效果

以上就是消除 inline-block 块元素之间间隙的方法。