行内元素(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>
方法不全面,欢迎大家补充_