Der Standardabstand von Inline-Block-Elementen wurde gelöscht-CSS-Tutorial-php.cn

Der Standardabstand von Inline-Block-Elementen wurde gelöscht

php中世界最好的语言

Freigeben： 2018-03-22 17:40:58

Original

2358 Leute haben es durchsucht

Dieses Mal werde ich Ihnen den Standardabstand von Inline-Block-Elementen vorstellen. Was sind die Vorsichtsmaßnahmen zum Löschen des Standardabstands von Inline-Block-Elementen? .

Schauen wir uns ohne weitere Umschweife direkt den Beispielcode an

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

Nach dem Login kopieren

Das implementierte Rendering ist wie folgt

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Links fixiert, rechts adaptives Layout

IE mit Opazitäts-Transparenzfilter Kompatible Lösungen

Das obige ist der detaillierte Inhalt vonDer Standardabstand von Inline-Block-Elementen wurde gelöscht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!