Dans HTML, les boutons sont des éléments cliquables utilisés pour effectuer une action spécifique. La plupart des boutons sont placés près les uns des autres, mais vous pouvez donner de l'espace entre deux boutons en utilisant la propriété de marge de CSS. Pour cela, vous pouvez utiliser la propriété de marge-gauche ou la propriété de marge droite.

Dans cet article, vous apprendrez à donner de l'espace entre deux boutons à l'aide de CSS. Mais, d'abord, découvrez les propriétés de marge-gauche et de marge droite une par une. Alors, commençons!

Qu'est-ce que la propriété CSS «marge-gauche»?

Dans CSS, "marge-gauche»La propriété est utilisée pour créer de l'espace à partir du côté gauche des éléments. L'élément sera plus éloigné de ses voisins si la valeur est positive, alors qu'elle se rapproche de ses voisins si la valeur spécifiée est négative.

Syntaxe

La syntaxe de la propriété de marge-gauche est la suivante:

marge-gauche: valeur

À la place de "valeur», Réglez la marge que vous souhaitez donner à l'élément du côté gauche.

Qu'est-ce que la propriété CSS «marge-droite»?

Le "marge à droite«La propriété de CSS est utilisée pour créer de l'espace à partir du côté droit de l'élément. Il positionne la zone de marge sur le côté droit de l'élément. La valeur par défaut de la propriété de marge droite est définie comme zéro; Cependant, vous pouvez spécifier des valeurs positives et négatives pour cela.

Syntaxe

La syntaxe de la propriété de marge droite est donnée ci-dessous:

marge droite: valeur

Placer le "valeur«Que vous souhaitez définir comme marge du côté droit de l'élément.

Comment donner de l'espace entre deux boutons?

Vous pouvez créer de l'espace entre deux boutons en utilisant le «marge-gauche" et "marge à droite" propriétés. Pour ce faire, dans la section HTML, nous ajouterons un titre en utilisant

et créer deux boutons avec le nom de classe "btn1" et "btn2", respectivement.

Html

Créer de l'espace entre deux boutons

Cliquez sur moi
Cliquez sur moi

Le résultat par défaut du code donné est:

Maintenant, passez au CSS pour créer de l'espace entre ces deux boutons.

Exemple 1: Donner de l'espace entre deux boutons en utilisant la propriété de marge droite

Ici, utilisez ".btn1«Pour accéder au premier bouton ajouté dans le HTML et définir la valeur de la propriété de marge droite comme«100px".

CSS

.btn1
marge droite: 100px;

Comme vous pouvez le voir, l'espace est créé sur le côté droit du premier bouton:

Dans l'exemple suivant, nous utiliserons le «marge-gauche»Propriété pour créer de l'espace entre deux boutons.

Exemple 2: Donner de l'espace entre deux boutons en utilisant une propriété de marge-gauche

Nous utiliserons ".btn2«Pour accéder au deuxième bouton créé dans le fichier HTML et attribuer la valeur de la propriété margin-gauche comme«50px»:

.btn2
marge-gauche: 50px;

Ce faisant, l'espace est créé le côté gauche du deuxième bouton qui peut être vu ci-dessous:

Vous voulez utiliser les deux propriétés à la fois? Découvrez l'exemple suivant!

Exemple 3: Donner de l'espace entre deux boutons en utilisant des propriétés de marge-gauche et de marge droite

Vous pouvez également définir la marge des deux boutons pour donner de l'espace entre eux. Pour ce faire, nous créerons de l'espace à partir du côté droit du premier bouton et du côté gauche du deuxième bouton en utilisant les propriétés de marge droite et de marge gauche, respectivement:

.btn1
marge-droite: 70px;

.btn2
marge-gauche: 70px;

Sortir

Nous avons fourni la méthode la plus simple liée à l'absence d'espace entre deux boutons dans CSS.

Conclusion

"marge-gauche" et "marge à droite«Les propriétés de CSS sont utilisées pour donner de l'espace entre deux boutons. En utilisant ceci, vous pouvez ajuster l'espace des côtés droite et gauche des boutons. Dans cet article, nous avons expliqué comment donner de l'espace entre deux boutons en utilisant deux méthodes différentes et fourni des exemples pour chacun d'eux.