使用display:inline-block;产生间距处理办法

使用display:inline-block;产生间距处理办法

使用display:inline-block;属性会产生大约3px的间距,清除间距的方法就是letter-spacing属性

<style>
        body,body * {
            margin: 0;
            padding: 0;
        }
        .a {
            width: 200px;
            height: 100px;
            background: green;
        }
        .a .b{
            width: 50px;
            height: 50px;
            background: red;
            display: inline-block;
            /*使子元素始终保持在同一水平线*/
            vertical-align: top;
        }
    </style>
    <div class="a">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>

实际效果:

想要效果

处理方法就是在父级元素添加属性letter-spacing,且与font-size:0;配合使用
注意:子元素的font-size继承父级为0,有文本内容需要重新设定字号
正确代码:

    <style>
        body,body * {
            margin: 0;
            padding: 0;
        }
        .a {
            width: 200px;
            height: 100px;
            background: green;
            letter-spacing: -3px;
            font-size: 0;
        }
        .a .b{
            width: 50px;
            height: 50px;
            display: inline-block;
            letter-spacing: 0;
            font-size: 16px;
        }
    </style>
    <div class="a">
        <div class="b" style="background: chartreuse"></div>
        <div class="b" style="background: yellow"></div>
        <div class="b" style="background: cornflowerblue"></div>
    </div>