CSS--使用display:inline-block;存在间隙问题解决

1.效果

 

2.源代码

<html>

<head>
    <meta charset="utf-8">
    <title>CSS--使用display:inline-block;存在间隙问题解决</title>
    <meta name="keyword" content="CSS--使用display:inline-block;存在间隙问题">
    <meta name="discription" content="CSS--使用display:inline-block;存在间隙问题">
    <style>
    /* 1.float: left; */

    .link a {
        border: 1px solid red;
        display: inline-block;
        font-size: 20px;
        /*  float: left; */
    }
    /* 2.margin-right: -3px; */

    .link a {
        border: 1px solid red;
        display: inline-block;
        font-size: 20px;
        /*  margin-right: -5px;
           font-size: 12px; */
    }
    /* 3.父节点font-size: 0; */
    /* .link{
            font-size: 0;
                 }  */

    .link a {
        border: 1px solid red;
        font-size: 20px;
        display: inline-block;
    }
    /* 4.letter-spacing: -5px; */

    /* .link {
       letter-spacing: -5px;
    }
    
    .link a {
        border: 1px solid red;
        font-size: 20px;
        display: inline-block;
        letter-spacing: 0;
    } */


    /* 5.word-spacing: -5px; */
   /*  .link{
       word-spacing: -5px;
   }
   .link a{
       font-size: 20px;
       display: inline-block;
       border: 1px solid red;
       word-spacing: 0;
   } */



    </style>
</head>

<body>
    <div class="link">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>
</body>

</html>
posted @ 2018-04-12 16:58  SunLike阿理旺旺  阅读(151)  评论(0)  编辑  收藏  举报