去除inline-block元素间间距，比较靠谱的两种办法

最新推荐文章于 2021-06-18 04:26:58 发布

我一定要早起

最新推荐文章于 2021-06-18 04:26:58 发布

阅读量3.3k

点赞数

文章标签：兼容

本文链接：https://blog.csdn.net/eaglewyy/article/details/51491467

版权

1.使用注释符号

1     <div><span class="1">1</span></div><!--
2     --><div><span class="2">2</span></div><!--
3     --><div><span class="3">3</span></div><!--
4     --><div><span class="4">4</span></div>

楼主对代码格式比较计较，这是动标签这边相对来说楼主可以接受的方式。

2.使用font-size和letter-space

html部分

<body>
    <div><span class="1">1</span></div>
    <div><span class="2">2</span></div>
    <div><span class="3">3</span></div>
    <div><span class="4">4</span></div>
</body>

css 部分

    <style>
        body {width: 100%;margin:0;text-align: center;font-size: 0;letter-spacing: -2px;}
        div{display: inline-block;width: 50%;background: lightblue;font-size: 36px;position: relative;vertical-align: middle;}
        div:before {content:"";display: inline-block;padding-bottom: 100%;vertical-align: middle;}
        div:nth-child(2),div:nth-child(3){background: pink;}
        span {display: inline-block;vertical-align: middle;font-size: 6em;color: #fff;}
    </style>

主要就是在外层body添加

font-size:0,–兼容chrome

letter-spacing:-2px,–兼容safari ,据说要根据字体大小调整，但是楼主用了88px的字体也没有问题，这个具体情况具体解决吧

我一定要早起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
去除inline-block元素间间距，比较靠谱的两种办法

1.使用注释符号1 <div><span class="1">1</span></div><div><span class="2">2</span></div><div><span class="3">3</span></div><div><span class="4">4</span></div>楼主对代码
复制链接

扫一扫