Ajouter un espace entre les boutons en HTML

1. Ajouter un élément div vide entre deux boutons pour ajouter de l’espace entre eux en HTML
2. Utilisez la propriété margin-right pour mettre de l’espace entre les boutons en HTML
3. Utilisez la propriété margin-right et le sélecteur not(:last-child) pour fournir un espace entre plusieurs boutons en HTML

Cet article présentera quelques méthodes pour ajouter de l’espace entre deux boutons HTML.

Ajouter un élément div vide entre deux boutons pour ajouter de l’espace entre eux en HTML

Un div vide peut être ajouté entre les deux boutons pour ajouter un espace entre eux. Ensuite, nous pouvons donner au div une certaine largeur qui crée un espace entre les boutons.

Par défaut, un div a une propriété display de block. Cela signifie que le div prend une ligne entière de sa position.

Si nous ajoutons un élément après un div, cet élément sera placé sous le div dans le navigateur.

Par conséquent, nous devons changer la propriété d’affichage du div en inline-block. Les éléments inline-block ont à la fois la propriété block et inline.

Les éléments inline-block peuvent avoir width, margin, padding, etc., mais ils ne prennent pas toute la ligne de leur emplacement, contrairement aux éléments block.

Par exemple, créez un div ; à l’intérieur de ce div, créez deux boutons en utilisant la balise button. Nommez ces boutons Button 1 et Button 2.

Créez un div entre ces boutons et attribuez-lui une classe espace. Ce div ne doit contenir aucun élément.

Sélectionnez le div interne avec sa classe space dans CSS, et définissez la propriété display sur inner-block. Donnez à la div une certaine largeur en fonction de l’exigence.

Notez que la valeur de width sera l’espace entre les boutons. Définissez également la propriété height sur auto afin que le div ne prenne que la hauteur requise.

L’exemple ci-dessous montre que deux boutons ont un espace de 4px.

Exemple de code :

<div>
  <button>
    Button 1
  </button>
  <div class="space">
  </div>
  <button>
    Button 2
  </button>
</div>

.space {
  width: 4px;
  height: auto;
  display: inline-block;
}

Utilisez la propriété margin-right pour mettre de l’espace entre les boutons en HTML

La propriété CSS margin crée un espace autour des éléments en dehors de toute bordure définie. La propriété margin combine quatre propriétés : margin-top, margin-bottom, margin-left et margin-right.

La propriété margin-top crée de l’espace au-dessus d’un élément. De même, les propriétés margin-bottom, margin-right et margin-left créent un espace en bas, à droite et à gauche de l’élément.

Nous pouvons utiliser la propriété margin-right pour le premier élément de bouton afin de créer un espace entre les boutons.

En conséquence, une marge d’une certaine largeur à droite du bouton sera créée. Ensuite, l’autre bouton résidera à côté de la marge.

Par exemple, créez deux boutons en utilisant la balise button et nommez Button 1 et Button 2. Définissez les classes du bouton sur B1 et B2.

En CSS, sélectionnez la classe B1 et définissez sa propriété margin-right sur 4px. Cela créera un espace 4px à droite du Button 1, créant un espace entre les deux boutons.

Exemple de code :

<button class="B1">
  Button1
</button>
<button class="B2">
  Button2
</button>

.B1 {
 margin-right: 4px;
}

Utilisez la propriété margin-right et le sélecteur not(:last-child) pour fournir un espace entre plusieurs boutons en HTML

Nous pouvons ajouter des espaces entre les multiples boutons en utilisant la propriété margin-right et le sélecteur CSS not(). La logique derrière cette approche est que nous allons créer l’espace entre chaque bouton en utilisant la propriété margin-right comme dans la deuxième méthode.

Mais, nous ne créerons pas d’espace après le dernier bouton.

Pour cela, nous utiliserons le sélecteur not(). A l’intérieur, le sélecteur not, on peut utiliser :last-child.

Le sélecteur :last-child désigne le dernier enfant à l’intérieur d’un conteneur. Dans l’ensemble, nous pouvons appliquer la règle suivante pour appliquer les styles.

.container>.button:not(:last-child){

}

Le symbole > sélectionne chaque enfant à l’intérieur du container. En conséquence, les styles seront appliqués à tous les enfants avec la classe button à l’intérieur du parent conteneur à l’exception du dernier enfant.

Par exemple, créez une div et donnez-lui la classe container.

A l’intérieur de la div, créez trois boutons et nommez-les Button 1, Button 2 et Button 3. Définissez également button comme classe pour chaque bouton.

Maintenant, utilisez la règle mentionnée ci-dessus pour définir le style en CSS. Dans la règle, utilisez la propriété margin-right et définissez-la sur 10px pour ajouter de l’espace à 10px entre les éléments enfants ou les boutons.

L’exemple ci-dessous montre que les trois boutons ont un espace de 10px entre eux.

Exemple de code :

<div class='container'>
 <button class='button'>Button 1</button>
 <button class='button'>Button 2</button>
 <button class='button'>Button 3</button>
</div>

.container>.button:not(:last-child) {
 margin-right: 10px;
}