這次給大家帶來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中文網其它相關文章!
推薦閱讀:
左側固定,右側自適應的布局方式
opacity透明度濾鏡的IE相容解決方案