L'espacement par défaut des éléments de bloc en ligne est effacé-tutoriel CSS-php.cn

L'espacement par défaut des éléments de bloc en ligne est effacé

php中世界最好的语言

Libérer： 2018-03-22 17:40:58

original

2395 Les gens l'ont consulté

Cette fois, je vais vous apporter l'espacement par défaut des éléments de bloc en ligne. Quelles sont les précautions pour effacer l'espacement par défaut des éléments de bloc en ligne. Voici un cas pratique, jetons un coup d'œil. .

Sans plus tard, regardons directement l'exemple de code

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

Copier après la connexion

Le rendu implémenté est le suivant

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Fixe à gauche, mise en page adaptative à droite

IE avec filtre de transparence d'opacité Solutions compatibles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!