关于inline、inline-block的间隙问题
2018-09-02 本文已影响0人
何大必
从前我只知道inline-block元素之间会有间隙，直到那一天后端开发人员找我说我的span（inline元素）怎么没有了间隙，让我弄出间隔。我看了之间的静态页面是没有问题的，仔细研究一番发现了一个大咪咪：
<style>
span{
background-color: red;
color: #fff;
}
</style>
<body>
<span>我的天1</span>
<span>我的天2</span>
<span>我的天3</span>
<span>我的天4</span>
</body>
结果：
image.png
结果居然出现了间隔，这跟我的固定思维（inline-block才有间隔冲突了）。
那么后端开发的人员那为什么没有间隔了呢，由于他们是将我的HTML用js拼接成字符串追加到页面上去，于是我的代码到他们那变成了这般（没有换行、没有间隔）：
<span>我的天1</span><span>我的天2</span><span>我的天3</span><span>我的天4</span>
在浏览器上的效果：
image.png
间隔不见了。
至此，固定思维inline-block元素产生间隔被打破，我想网上大多数去除inline-block的间隙的文章标题应该改成去除行内元素（inline、inline-block）的间隔。
关于去除间隔我一般使用父元素font-size设置为0 的方法，更多方法详见张鑫旭老师的此篇博客
