[css]a标签之间的间距

html-css013

[css]a标签之间的间距,第1张

在使用行内a标签的时候回发现两个a标签之间存在间距

效果如下:

以下有四种清除默认间距的方法。

效果:

参考: https://www.cnblogs.com/kevinCoder/p/6418605.html

a标签默认是行内元素，而行内元素之间的回车键、多个空格、多个制表符（tab）等均会按一个空格来处理，这样的话，如果相邻的两个a标签不在同一行（换句话说它们之间有回车换行符），则显示在页面的时候它们之间就会出现一个空格的间隙。

因此，要想解决这个问题，最好也是最简单的办法，就是把它们写在同一行且互相之间不留任何字符（包括空格），比如：

<a href="...">链接1</a><a href="...">链接2</a><a href="...">链接3</a>

如果既要把它们写在不同的行，又不想有空隙，可以把a标签改为块级元素。但是要想让块级的a标签仍然排在同一行就要多费一番手脚了，比如通过浮动（浮动时a标签会自动变为块级元素）：

<style>

a {float:left}

</style>

<a href="...">链接1</a>

<a href="...">链接2</a>

<a href="...">链接3</a>

<br style="clear:both"/>

此外还可以利用CSS3的弹性盒子flex来实现，这个就不多说了。