Nous pouvons facilement supprimer les espaces entre les éléments de bloc en ligne. Avant de continuer, créons d'abord un document HTML et ajoutons un élément de bloc en ligne avec des espaces.
Nous styliserons l'élément de bloc en ligne en utilisant l'attribut display avec la valeur inline-block -
nav a {
display: inline-block;
background: blue;
color: white;
text-decoration: none;
font-size: 35px;
}
Nous avons défini les styles ci-dessus pour l'élément
<nav> <a href="#">Tutorials</a> <a href="#">point</a> </nav>
Voyons maintenant l'exemple complet d'ajout d'un élément de bloc en ligne avec des espaces -
<!DOCTYPE html>
<html>
<head>
<title>Inline block elements</title>
<style>
nav a {
display: inline-block;
background: blue;
color: white;
text-decoration: none;
font-size: 35px;
}
</style>
</head>
<body>
<h1>The inline-block elements</h1>
<p>Below are the inline-block elements with space:</p>
<nav>
<a href="#">Tutorials</a>
<a href="#">point</a>
</nav>
</body>
</html>
Nous pouvons supprimer les espaces entre les éléments de bloc en ligne en utilisant la propriété font-size. L'attribut font-size affecte la taille du texte d'un élément. Voici les valeurs possibles -
xx-small - Définit la taille du texte de l'élément pour qu'elle soit plus petite que la taille produite par la valeur x-small.
x-small - Définit la taille du texte de l'élément pour qu'elle soit plus petite que la taille produite par la valeur small.
small - Définit la taille du texte de l'élément pour qu'elle soit plus petite que la taille produite par la valeur médiane.
medium - Définit la taille du texte de l'élément pour qu'elle soit inférieure à la taille produite par la valeur large et supérieure à la taille produite par la valeur small.
large - Définit le texte de l'élément à une taille supérieure au résultat médian.
x-large - Définit la taille du texte de l'élément pour qu'elle soit plus grande que la taille produite par la valeur large.
xx-large - Définit la taille du texte de l'élément pour qu'elle soit plus grande que la taille produite par la valeur xlarge.
larger - Définit le texte de l'élément pour qu'il soit plus grand que le texte de son élément parent.
smaller - Définit le texte d'un élément pour qu'il soit plus petit que le texte de son élément parent.
length - toute valeur de longueur autorisée. font-size n’autorise pas les valeurs de longueur négatives.
Pourcentage - Définit la taille du texte d'un élément par rapport à son élément parent.
Voyons maintenant un exemple de suppression des espaces entre les éléments de bloc en ligne -
<!DOCTYPE html>
<html>
<head>
<title>Inline block elements without space</title>
<style>
nav {
font-size: 0;
}
nav a {
display: inline-block;
background: blue;
color: white;
text-decoration: none;
font-size: 35px;
}
</style>
</head>
<body>
<h1>The inline-block elements</h1>
<p>Below are the inline-block elements without space:</p>
<nav>
<a href="#">Tutorials</a>
<a href="#">point</a>
</nav>
</body>
</html>
Nous pouvons utiliser la propriété margin-right pour supprimer l'espace entre les éléments de bloc en ligne -
<!DOCTYPE html>
<html>
<head>
<title>Inline block elements without space</title>
<style>
nav a {
display: inline-block;
background: blue;
margin-right: -4px;
color: white;
text-decoration: none;
font-size: 35px;
}
</style>
</head>
<body>
<h1>The inline-block elements</h1>
<p>Below are the inline-block elements without space:</p>
<nav>
<a href="#">Tutorials</a>
<a href="#">point</a>
</nav>
</body>
</html>
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
