div + css 布局中的一些小技巧 去除多个a标签中间的间隙（三）

在每个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>

效果如图