inline-block元素預設間距清除

這次帶給大家inline-block元素預設間距清除，inline-block元素預設間距清除的注意事項有哪些，以下就是實戰案例，一起來看一下。

話不多說，直接來看範例程式碼

nbsp;html>


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


    <h4 id="默认状态">默认状态</h4>
    <p>
        </p><p>盒子1</p>
        <p>盒子2</p>
        <p>盒子3</p>
        <p>盒子4</p>
        <p>盒子5</p>
    
    <h4 id="方法一-letter-spacing-em">方法一         letter-spacing: -0.5em</h4>
    <p>
        </p><p>盒子1</p>
        <p>盒子2</p>
        <p>盒子3</p>
        <p>盒子4</p>
        <p>盒子5</p>
    
    <h4 id="方法二-font-size">方法二        font-size: 0</h4>
    <p>
        </p><p>盒子1</p>
        <p>盒子2</p>
        <p>盒子3</p>
        <p>盒子4</p>
        <p>盒子5</p>
    

#實作的效果圖如下

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

左側固定，右側自適應的佈局方式

opacity透明度濾鏡的IE相容解決方法

以上是inline-block元素預設間距清除的詳細內容。更多資訊請關注PHP中文網其他相關文章！