span设置边框时上边框永远都不显示出来，内容之间存在空白，垂直居中

解决方法：

使用line-height设置，把上面部分露出来。

height和line-height设置一样的值时会垂直居中。

给父元素设置fontsize=0，再给子元素设置fontsize可以把空白去掉。

    <style>
    .b{
        font-size: 0;
    }
    .b .a{
        font-size: 16px;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        background-color: #f5f5f5;
        padding: 0 20px;
        border: 1px solid transparent;
    }
    .b .a:hover {
        cursor:pointer;
        background: #fff;
        border: 1px solid blue;
    }

    </style>
</head>
<body>
<div class="b">
    <div class="a">我的淘宝</div>
    <div class="a">购物车</div>
    <div class="a">收藏夹</div>
    <div class="a">商品分类</div>
    <div class="a">千牛卖家中心</div>
    <div class="a">联系客服</div>
    <div class="a">网站导航</div>
</div>

 

posted @ 2020-05-08 22:18  完美先生2333  阅读(798)  评论(0)    收藏  举报