這次帶給大家inline-block元素預設間距清除，inline-block元素預設間距清除的注意事項有哪些，以下就是實戰案例，一起來看一下。
話不多說，直接來看範例程式碼
<!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>
<p>
<p class="box">盒子1</p>
<p class="box">盒子2</p>
<p class="box">盒子3</p>
<p class="box">盒子4</p>
<p class="box">盒子5</p>
</p>
<h4>方法一 letter-spacing: -0.5em</h4>
<p class="content">
<p class="box">盒子1</p>
<p class="box">盒子2</p>
<p class="box">盒子3</p>
<p class="box">盒子4</p>
<p class="box">盒子5</p>
</p>
<h4>方法二 font-size: 0</h4>
<p class="content2">
<p class="box">盒子1</p>
<p class="box">盒子2</p>
<p class="box">盒子3</p>
<p class="box">盒子4</p>
<p class="box">盒子5</p>
</p>
</body>
</html>#實作的效果圖如下
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是inline-block元素預設間距清除的詳細內容。更多資訊請關注PHP中文網其他相關文章！
