css去除行内元素（inline-block）的默认空隙的多种方法

行内元素（inline-block）是会有默认的元素空隙的，但是在很多情况我们需要元素无缝链接展示，默认的margin:0;padding:0;是不起作用的，本文列举了几种css的方法来对默认空隙进行修改，且兼容多种浏览器。

效果如下：
改变前==》改变后

方法一：去除元素之间的默认空格，包括换行

 <div class="demo">
    <span>什么什么</span><span>这是什么</span><span>不知道哦</span>
  </div>

但是这种方法对于元素太多或是动态加载的标签都不友好，下面列举几个适用性强的

方法二：浮动

 .demo a{
     
  	background-color: #f7cae8;
   	float: left;
}
<div class="demo">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
</div>

方法三：letter-spacing

CSS 的 letter-spacing 属性用于设置文本字符的间距表现。
给文本 letter-spacing 属性应用了一个很大的负值，字母将会互相重叠到一个点，在这个点上单词可能无法识别了。

.demo{
     
 	letter-spacing: -100px;
}
.demo a{
     
  	background-color: #f7cae8;
  	letter-spacing: 0;
}
<div class="demo">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
</div>

也可以使用 word-spacing 和上面的类似，将css改成⬇️

.demo{
     
 	word-spacing: -8px;
}
.demo a{
     
  	background-color: #f7cae8;
  	word-spacing: 0;
}

方法四： font-size: 0；

个人觉得最好用的方法

.demo1{
     
    font-size: 0;
}
.demo1 span{
     
	display: inline-block;
    font-size: 14px;/*这里一定一定要设置，不然文本内容将不显示*/
}
<div class="demo demo1">
    <span>这是什么</span>
    <span>什么是什么</span>
    <span>不知道哦</span>
</div>

方法不全面，欢迎大家补充^_