在每个a链接中间有一点的间隙,有时候会影响到你需要的布局效果, 如上图
如果不想要这个间隙的话,
方法1
设置父容器的font-size: 0;,然后设置a标签的font-size: 14px;
具体如下:
/* css代码 */
div {
margin: 100px auto;
width: 200px;
height: 200px;
font-size: 0px;
background-color: skyblue;
}
a {
font-size: 14px;
background-color: pink;
}
<!-- 示例代码 -->
<div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
</div>
方法2
直接将a标签写在一行(注意a标签与a标签间如果有空格则不会生效),这样也是没有问题的,但是代码看着就不是很简洁,可读性差, 在多数时候并不建议使用,
/* css代码 */
div {
margin: 100px auto;
width: 200px;
height: 200px;
background-color: skyblue;
}
a {
background-color: pink;
}
<!-- 示例代码 -->
<div>
<a href="">链接1</a><a href="">链接2</a><a href="">链接3</a>
</div>
效果如图
方法3
将a链接改成块级元素之后,然后浮动,也会去除间隙,(很多时候都是需要自己设置样式的,也就没有留白这问题了.)
/* css代码 */
div {
margin: 100px auto;
width: 200px;
height: 200px;
background-color: skyblue;
}
a {
display: block;
float: left;
background-color: pink;
}
<!-- 示例代码 -->
<div>
<a href="">链接1</a>
<a href="">链接2</a>
<a href="">链接3</a>
</div>
效果如图