Ce manuel vous apprendra la procédure pour créer un espace entre deux maillons.
Commençons!
Comment donner de l'espace entre deux liens en HTML et CSS ?
Pour laisser de l'espace entre deux liens, tout d'abord, ajoutez les liens requis dans le fichier HTML.
Étape 1 : Ajouter des liens en HTML
En HTML, nous allons créer un conteneur à l'aide de la balise
HTML
< div >< un href = 'https://linuxhint.com/create-html-file/' > Comment créer un fichier HTML ? < / un >
< un href = 'https://linuxhint.com/edit-html-file/' > Comment éditer un fichier HTML ? < / un >
< / div >
L'image suivante montre que les liens ont été ajoutés avec succès :
Étape 2 : stylisez la division et le lien
Dans cette étape, stylisez la div et le lien en utilisant ' div ” en CSS. Nous allons ajuster le rembourrage à ' 40px ' et définissez la taille de la police des liens sur ' plus grande ', la hauteur de la div est définie comme ' 150px ' et utilisez la propriété background et définissez la couleur de la div comme ' le noir ”. Après cela, ajustez la largeur de la bordure comme ' 5px ', styliser comme ' pointillé ' et la couleur comme ' RVB(251, 255, 0) ”.
CSS
div {rembourrage : 40px ;
taille de police : plus grande ;
la taille : 150px ;
Contexte : le noir ;
frontière : 5px pointillé RVB ( 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 allons expliquer les deux méthodes une par une.
Méthode 1 : Utiliser 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 espace insécable. Dans le fichier HTML, ajouter 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 d'espaces requis.
Passons à l'exemple pour comprendre le concept énoncé !
Exemple
Ici, on écrira quatre fois « ” pour créer un espace après le premier lien de manière à ce que le deuxième lien apparaisse après les quatre espaces.
HTML
< div >< un href = 'https://linuxhint.com/create-html-file/' > Comment créer un fichier HTML ? < / un >
Comment modifier un fichier HTML ?
Comme vous pouvez le voir, un espace est créé sur le côté droit du premier lien :
Méthode 2 : Utiliser CSS
En CSS, nous utiliserons le ' marge droite ” propriété pour donner de l'espace entre deux liens. La ' marge droite ” est utilisée pour ajouter de l'espace à partir du côté droit de l'élément. Vous pouvez également lui attribuer des valeurs négatives.
Syntaxe
La syntaxe de la propriété margin-right est donnée ci-dessous :
marge droite : évaluerÀ la place de ' évaluer ”, définissez la marge à partir 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é margin-right sur ' 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 un espace vertical entre deux liens, alignez d'abord les liens sous forme verticale. Cela se fera en utilisant le ' bloquer ' valeur du ' affichage ” puis en utilisant la propriété “ 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é display comme ' bloquer ” pour aligner les liens verticalement. Ensuite, donnez l'espace entre deux liens en définissant la valeur de la propriété line-height comme ' 80px ” :
un {affichage : bloquer ;
hauteur de la 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 pour donner de l'espace entre deux liens en HTML et CSS.
Conclusion
La ' ”, “ marge droite ', et ' hauteur de la ligne Les propriétés 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 droit 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.