Maison > Article > interface Web > Comment supprimer l'espacement entre les éléments de bloc en ligne en CSS ? (plusieurs méthodes)
Comment supprimer l'espacement entre les éléments de bloc en ligne en CSS ? (plusieurs méthodes)
- 不言avant
- 2019-04-04 11:56:232915parcourir
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>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>③ 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>④ Supprimez la balise de fermeture.
<div>
<a href="">链接1
<a href="">链接2
<a href="">链接3
<a href="">链接4
</div>⑤ 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>⑥ 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>[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!