這篇文章主要介紹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> <h5>默認狀態</h5> <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> <h5>方法一 letter-spacing: -0.5em</h5> <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> <h5>方法二 font-size: 0</h5> <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>
實現的效果圖如下
以上是“inline-block元素默認間距如何清除”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創新互聯行業資訊頻道!
分享文章:inline-block元素默認間距如何清除
本文鏈接:http://vcdvsql.cn/article4/gjeooe.html
成都網站建設公司_創新互聯,為您提供靜態網站、網站導航、定制開發、網站設計、品牌網站設計、外貿建站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯