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

1.使用注释符号

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

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

2.使用font-size和letter-space

html部分

<body>
    <div><span class="1">1span>div>
    <div><span class="2">2span>div>
    <div><span class="3">3span>div>
    <div><span class="4">4span>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的字体也没有问题,这个具体情况具体解决吧

你可能感兴趣的:(去除inline-block元素间间距,比较靠谱的两种办法)