去除inline-block元素间间距的N种方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79973649

inline-block元素主要包括: 、 、 、 、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除inline-block元素间间距的N种方法 </title>
    <style>
        .space a {  
            display: inline-block;  
            padding: .5em 1em;  
            background-color: red;    
        }
    </style>
</head>
<body>

    <div class="space">
        <a href="#">苹果</a>
        <a href="#">橘子</a>
        <a href="#">葡萄</a>
    </div>
</body>
</html>

效果图:
这里写图片描述
二、如何除去元素之间的空格

(1)使用magin负值

.space a {  
    display: inline-block;  
    padding: .5em 1em;  
    background-color: red;  
    margin-left:-5px;  
 }

(2)使用font-size:0

.space {  
   font-size:0;  
}  
.space a {  
    display: inline-block;  
    padding: .5em 1em;  
    background-color: red;  
    font-size:16px  
 }

(3)使用letter-spacing

.space {  
   letter-spacing: -5px;  
}  
.space a {  
    display: inline-block;  
    padding: .5em 1em;  
    background-color: red;  
    letter-spacing: 0px;  
 }

(4)使用word-spacing

    .space {  
       word-spacing: -5px;  
    }  
    .space a {  
        display: inline-block;  
        padding: .5em 1em;  
        background-color: red;  
           word-spacing:0px;  
   }  

三、结果样式
这里写图片描述

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页