Comment supprimer l'espacement entre les éléments de bloc en ligne en CSS ? (plusieurs méthodes)-tutoriel CSS-php.cn

Comment supprimer l'espacement entre les éléments de bloc en ligne en CSS ? (plusieurs méthodes)

不言

Libérer： 2019-04-04 11:56:23

avant

3025 Les gens l'ont consulté

Le contenu de cet article explique comment supprimer l'espacement entre les éléments de bloc en ligne en CSS ? (Plusieurs méthodes), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Description du phénomène

Dans le vrai sens du terme, il y aura un écart entre les éléments présentés horizontalement dans le bloc en ligne lorsqu'ils sont affichés dans des sauts de ligne ou séparés par des espaces. , ce qui entraînera la lecture des sauts de ligne, etc., comme un espace.

2. Comment supprimer les espaces

Nous pouvons supprimer les sauts de ligne et les espaces entre les éléments, de sorte que l'espacement disparaisse naturellement, mais cela réduira la lisibilité du code et n'est pas conseillé.

<div>
        <a href="">
        链接1</a><a href="">
        链接2</a><a href="">
        链接3</a><a href="">
        链接4</a>
    </div>

    <div>
        <a href="">链接1</a
        ><a href="">链接2</a
        ><a href="">链接3</a
        ><a href="">链接4</a>
    </div>

    <div>
        <a href="">链接1</a><!--
        --><a href="">链接2</a><!--
        --><a href="">链接3</a><!--
        --><a href="">链接4</a>
    </div>

Copier après la connexion

Utilisez des valeurs de marge négatives. Cependant, en raison d'incertitudes externes et du problème de la valeur de marge extra négative du dernier élément, cette méthode n'est pas recommandée.

<style>
        a {
            background: pink;
            display: inline-block; 
            padding: .5em 1em;
            margin: -3px;
        }
</style>
<body>
    <div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
    </div>
</body>

Copier après la connexion

③ Définissez font-size:0 sur le parent, puis définissez notre taille de police dans l'élément enfant, ce qui peut également supprimer l'espacement entre les éléments.

<style>
        div{
            font-size: 0;
        }
        a{
            font-size: 16px;
            background: pink;
        }
</style>
<div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
</div>

Copier après la connexion

④ Supprimez la balise de fermeture.

<div>
        <a href="">链接1        
        <a href="">链接2        
        <a href="">链接3        
        <a href="">链接4      
    </div>

Copier après la connexion

⑤ Utilisez l'espacement des lettres.

<style>
        div{
            letter-spacing: -6px;
        }
        a{
            letter-spacing: 0;
            background: pink;
        }
</style>
<div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
</div>

Copier après la connexion

⑥ Utilisez l'espacement des mots.

<style>
        div{
            word-spacing: -6px;
        }
        a{
            word-spacing: 0;
            background: pink;
        }
</style>
<div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
</div>

Copier après la connexion

[Recommandations associées : Tutoriel vidéo CSS]

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!