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

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的字体也没有问题，这个具体情况具体解决吧