Comment donner de l'espace entre deux liens dans HTML & CSS?

Dans HTML, les liens sont des hyperliens qui peuvent vous conduire à d'autres sites. Les liens connectent généralement des ressources Web, telles que des images, des vidéos, des fichiers PDF ou des pages Web. HTML utilise le «”Tag pour créer des liens en spécifiant l'URL et en liant le texte. Lorsque vous ajoutez deux liens dans le HTML, par défaut, ils sont placés côte à côte sans aucun espace.

Ce manuel vous apprendra la procédure pour créer de l'espace entre deux liens.

Commençons!

Comment donner de l'espace entre deux liens dans HTML & CSS?

Pour donner de l'espace entre deux liens, tout d'abord, ajoutez les liens requis dans le fichier HTML.

Étape 1: Ajouter des liens dans HTML

Dans HTML, nous créerons un conteneur en utilisant la balise et deux liens avec l'aide de la balise. Ici, une référence hyperlienne est utilisée pour donner l'adresse du site et fournir l'hyperlien requis. En plus de l'adresse, spécifiez le nom du lien car le lien n'apparaît pas sur le site Web. Il affichera uniquement le nom ou la légende que nous attribuons.

Html

Comment créer un fichier HTML?
Comment modifier un fichier html?

L'image suivante montre que les liens ont été ajoutés avec succès:

Étape 2: Style le div et le lien

Dans cette étape, style le div et le lien en utilisant «div"Dans CSS. Nous allons ajuster le rembourrage à «40px»Et définissez la taille de la police des liens comme«plus grand», La hauteur du div est définie comme«150px»Et utilisez la propriété d'arrière-plan et définissez la couleur de la div comme«noir". Après cela, ajustez la largeur de la frontière comme «5px», Style comme«en pointillé"Et la couleur comme"RVB (251, 255, 0)".

CSS

div
rembourrage: 40px;
taille de police: plus grand;
hauteur: 150px;
Contexte: noir;
Border: 5px RVB en pointillé (251, 255, 0);

En utilisant le code ci-dessus, la sortie suivante est obtenue. Comme vous pouvez le voir, la div et les liens sont stylisés:

Étape 3: Donnez de l'espace entre deux liens horizontalement

Nous pouvons donner de l'espace entre deux liens horizontalement en utilisant HTML et CSS. Ici, nous expliquerons les deux méthodes une par une.

Méthode 1: Utilisation de HTML

Pour donner de l'espace entre les liens sans écrire de CSS externe, vous pouvez utiliser ""Dans le HTML où vous voulez créer de l'espace. ""Signifie un espace non révolutionnaire. Dans le fichier HTML, en ajoutant un signifie un espace. Si vous souhaitez donner plus d'espace, il n'est pas préférable d'ajouter manuellement en fonction du nombre requis d'espaces.

Passons à l'exemple pour comprendre le concept déclaré!

Exemple

Ici, nous écrirons quatre fois "«Pour créer de l'espace après le premier lien de telle manière que le deuxième lien apparaîtra après les quatre espaces.

Html

Comment créer un fichier HTML?
Comment modifier un fichier html?

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

Méthode 2: Utilisation de CSS

Dans CSS, nous utiliserons le «marge à droite»Propriété pour donner de l'espace entre deux liens. Le "marge à droite»La propriété est utilisée pour ajouter de l'espace du côté droit de l'élément. Vous pouvez également définir les valeurs négatives pour cela.

Syntaxe

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

marge droite: valeur

À la place de "valeur», Réglez la marge du côté droit de l'élément. Continuons l'exemple.

Exemple

Ici, nous utiliserons "un«Pour accéder au lien que nous avons créé dans le HTML. Ensuite, définissez la valeur de la propriété de marge droite comme «50px»:

un
marge-droite: 50px;

L'espace est créé à partir du côté droit du premier lien, qui peut être vu ci-dessous:

Étape 4: Donnez de l'espace entre deux liens verticalement

Pour donner de l'espace vertical entre deux liens, alignez d'abord les liens sous forme verticale. Cela se fera en utilisant le «bloc«Valeur du«afficher«Propriété puis en utilisant le«hauteur de la ligne»Propriété pour donner de l'espace entre deux lignes de liaison.

Exemple:

Ici, nous allons définir la valeur de la propriété d'affichage comme «bloc«Pour aligner les liens verticalement. Ensuite, donnez l'espace entre deux liens en définissant la valeur de la propriété linéaire-hauteur comme «80px»:

un
bloc de visualisation;
hauteur de ligne: 80px;

Comme vous pouvez le voir, l'espace est créé à l'aide de la propriété Line-Height:

C'est ça! Nous avons expliqué la méthode de donner de l'espace entre deux liens dans HTML & CSS.

Conclusion

Le "","marge à droite", et "hauteur de la ligne«Les propriétés de CSS sont utilisées pour donner un espace horizontal et vertical entre deux liens. En utilisant cela, vous pouvez ajuster l'espace des côtés droite et gauche des liens. Dans cet article, nous avons expliqué la procédure pour donner de l'espace entre deux liens en utilisant deux méthodes différentes et fourni des exemples connexes.