去除inline-block元素间间距的N种方法-优快云博客

本文介绍四种有效去除HTML中inline-block元素间的间距方法：通过使用负margin、将父元素font-size设为0、调整letter-spacing及word-spacing属性。这些技巧对于前端开发者来说非常实用。

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;  
   }