inline-block元素預設間距清除

來源:互聯網
上載者:User
這次給大家帶來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相容解決方案

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.