recherche

Maison  >  Article  >  interface Web  >  L'espacement par défaut des éléments de bloc en ligne est effacé

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

php中世界最好的语言
php中世界最好的语言original
2018-03-22 17:40:582355parcourir

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Différentes manières d'écrire du CSSArticle suivant：Différentes manières d'écrire du CSS

Articles Liés

Voir plus