Comment supprimer les espaces entre les éléments inline/inline-block en HTML ?-tutoriel HTML-php.cn

Comment supprimer les espaces entre les éléments inline/inline-block en HTML ?

WBOY

Libérer： 2023-09-14 20:21:04

avant

787 Les gens l'ont consulté

Comment supprimer les espaces entre les éléments inline/inline-block en HTML ?

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.

Éléments 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;
}

Copier après la connexion

Nous avons défini les styles ci-dessus pour l'élément

ci-dessous -

<nav>
   <a href="#">Tutorials</a>
   <a href="#">point</a>
</nav>

Copier après la connexion

Voyons maintenant l'exemple complet d'ajout d'un élément de bloc en ligne avec des espaces -

Exemple

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

Copier après la connexion

Utilisez l'attribut font-size pour supprimer les espaces entre les éléments de bloc en ligne

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>

Copier après la connexion

Utilisez la propriété marginright pour supprimer l'espace entre les éléments de bloc en ligne

Nous pouvons utiliser la propriété margin-right pour supprimer l'espace entre les éléments de bloc en ligne -

Exemple

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

Copier après la connexion

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!