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>