使用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;         }     </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> 

文章来源: https://blog.csdn.net/weixin_45162984/article/details/90727161