Comment Supprimer l'Espace Entre les Éléments de Niveau Inline?

Supprmier l'espace entre les éléments de niveau inline (en ligne) est l'une des questions les plus fréquentes sur Internet. En fait, une série des éléments de niveau inline vont normalement avoir des espaces entre eux.

On peut résoudre ce problème à l'aide des propriétés CSS. De plus, il y a quelques trucs qui peuvent supprimer l'espace entre ces éléments.

Discutons l'exemple suivant et trouvons une solution.

Créez une balise <ul> qui est utilisée pour spécifier une liste non ordonnée. La balise <ul> est un élément de niveau inline. Créez des balises <li>. Chaque élément d'une liste non ordonnée est déclaré à l'intérieur de la balise <li>.
Utilisez la pseudo-classe :nth-child() pour mettre un style à deux balises suivantes <li>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      li {
        display: inline-block;
        width: 150px;
        font-size: 20px;
        color: #eeeeee;
      }
      li:nth-child(1) {
        background: #1c87c9;
      }
      li:nth-child(2) {
        background: #666666;
      }
      li:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Élément 1</li>
      <li>Élément 2</li>
      <li>Élément 3</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Voici l'espace entre les éléments de niveau inline. Supprimons les espaces en utilisant quelques téchniques.

Le moyen le plus facile est le suivant:

<ul>
    <li>Élément 1</li><li>Élément 2</li><li>Élément 3</li>
</ul>

Vous pouvez même manquer certaines balises de fermeture comme ça:

<ul>
  <li>Élément 1
  <li>Élément 2
  <li>Élément 3
</ul>

Voyons une autre façon de supprimer les espaces en utilisant la propriété margin-right. Dans l'exemple suivant, nous définissons margin-right: -4px; qui supprime les espaces entre notre éléments.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav a {
        display: inline-block;
        background: #1c87c9;
        margin-right: -4px;
        color: white;
        font-weight: bold;
        text-decoration: none;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#"> W </a>
      <a href="#"> 3</a>
      <a href="#"> docs</a>
    </nav>
  </body>
</html>

Essayez-vous-même!

Nous pouvons obtenir le même résultat en définissant la propriété font-size à 0 pour <nav> :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        font-size: 0;
      }
      nav a {
        display: inline-block;
        background: #1c87c9;
        font-size: 25px;
        color: white;
        font-weight: bold;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">W</a>
      <a href="#">3</a>
      <a href="#"> docs</a>
    </nav>
  </body>
</html>

Essayez-vous-même!

On peut supprimer les espaces avec flexbox . Lisez les commentaires pour savoir pourquoi on doit utiliser des extensions avec la propriété display:

Exemple

<!DOCTYPE html> out it
<html>
  <head>
    <style>
      div {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex; /* NEW - Chrome */
        display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
      }
      strong {
        display: inline-block;
        width: 150px;
        font-size: 20px;
        padding: 20px;
        color: #eeeeee;
        text-align: center;
      }
      strong:nth-child(1) {
        background: #1c87c9;
      }
      strong:nth-child(2) {
        background: #666666;
      }
      strong:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de comment supprimer l'espace entre les éléments de niveau inline</h2>
    <div>
      <strong>Élément 1</strong>
      <strong>Élément 2</strong>
      <strong>Élément 3</strong>
    </div>
  </body>
</html>

Essayez-vous-même!

La propriété CSS float peut aussi être utile:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        clear: both;
        content: " ";
        display: table;
      }
      span {
        display: inline-block;
        width: 150px;
        font-size: 18px;
        padding: 10px 15px;
        text-align: center;
        color: #eeeeee;
        float: left;
      }
      span:nth-child(1) {
        background: #1c87c9;
      }
      span:nth-child(2) {
        background: #666666;
      }
      span:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Élément 1</span>
      <span>Élément2</span>
      <span>Élément 3</span>
    </div>
    <p>Un texte</p>
  </body>
</html>

Essayez-vous-même!