inline-block元素默認間距的兩種清除方法示例代碼
編輯：關於CSS
話不多說，直接來看示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
letter-spacing: -0.5em;
}
.content .box{
letter-spacing: normal;
}
.content2{
font-size: 0;
}
.content2 .box{
font-size: initial;
}
.box{
width: 200px;
height: 100px;
background-color: #EEEEEE;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h4>默認狀態</h4>
<div>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
<div class="box">盒子4</div>
<div class="box">盒子5</div>
</div>
<h4>方法一 letter-spacing: -0.5em</h4>
<div class="content">
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
<div class="box">盒子4</div>
<div class="box">盒子5</div>
</div>
<h4>方法二 font-size: 0</h4>
<div class="content2">
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
<div class="box">盒子4</div>
<div class="box">盒子5</div>
</div>
</body>
</html>
實現的效果圖如下
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
小編推薦
熱門推薦