話不多說，直接來看示例代碼
<!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>實現的效果圖如下
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
