inline-block元素默認間距的兩種清除方法示例代碼

2024-07-11 08:58:02

字體：大中小

來源：轉載

供稿：網友

話不多說，直接來看示例代碼

<!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>

實現的效果圖如下