Les images sont utilisées pour améliorer l'apparence des pages Web et les concevoir efficacement. En tant que développeur Web, HTML vous permet d'ajouter plusieurs images et de les style sur votre site Web. Cependant, ces images sont espacées de très près par défaut, mais vous pouvez personnaliser l'espace avec CSS en fonction de vos préférences.

Dans cet article, nous apprendrons:

• Ajouter de l'espace entre les images en utilisant "grille"
• Ajouter de l'espace entre les images en utilisant "fléchir"
• Ajouter de l'espace entre les images en utilisant "marge"

Pour créer de l'espace entre les images, consultez d'abord la méthode pour ajouter des images en HTML, puis nous créerons de l'espace entre eux.

Alors, commençons!

Comment ajouter des images dans div?

Pour ajouter des images dans le div, nous allons d'abord créer un conteneur en utilisant le «»Tag et attribuez le nom de classe comme«div". À l'intérieur de la balise, nous ajouterons un titre

. Ensuite, créez un nom de classe sous-div comme «IMG"Dans lequel nous ajouterons six images en utilisant la balise et spécifiez la source d'image dedans.

Html

Ajouter de l'espace entre les images

Dans le fichier CSS, utilisez "div«Pour accéder au conteneur créé en HTML. Nous allons ajuster la hauteur de la div comme «auto"Pour permettre au div de s'organiser automatiquement en fonction de ses éléments. Pour styliser le div, ajouter la couleur d'arrière-plan comme «RVB (170, 138, 172)»Et réglez la largeur de la frontière comme«10px», Style comme«rainure», Et la couleur comme«RVB (77, 0, 80)". Nous allons également définir la couleur de la rubrique comme «RVB (77, 0, 80)".

CSS

div
Hauteur: Auto;
Contexte: RVB (170, 138, 172);
Border: 10px Groove RGB (77, 0, 80);
Couleur: RVB (77, 0, 80);

Ici, vous pouvez voir que les images sont ajoutées dans la div mais elles ne sont pas organisées et n'ont pas d'espace égal entre eux:

Maintenant, nous allons créer un espace entre ces images en utilisant trois méthodes différentes.

Méthode 1: Ajoutez de l'espace entre les images en utilisant «Grid»

Afin d'ajouter de l'espace entre les images, utilisez le CSS "afficher»Propriété et définissez ses valeurs comme«grille», Qui ajustera l'élément dans un récipient de grille.

Syntaxe

La syntaxe de la propriété d'affichage est:

Affichage: grille;

Continuons l'exemple précédent et créons de l'espace entre les images.

Exemple

Nous allons définir la valeur de la propriété d'affichage comme «grille«Pour afficher des images sous forme de grille. Ensuite, créez trois colonnes en utilisant le «colonne de la grille»Propriété et trois lignes en utilisant le«lignes de tempête de grille". Ensuite, définissez les fractions comme «1FR","1FR", et "1FR«Pour les lignes et les colonnes, ce qui signifie qu'ils ont acquis un espace égal. Après cela, utilisez le «chanqueur" et "se raminer«Propriétés pour créer un espace et définir sa valeur comme«25px»:

img
Affichage: grille;
Grid-Template-colonnes: 1fr 1fr 1fr;
Grid-Template Rows: 1fr 1fr 1fr;
Row-Gap: 25px;
Colonne-Gap: 25px;

Ici, vous pouvez voir que l'espace est créé entre les images, mais lorsque nous redimensions le navigateur, il affecte la disposition des images:

Passons à la deuxième méthode!

Méthode 2: Ajoutez de l'espace entre les images en utilisant «flex»

Dans le cadre de CSS, la propriété d'affichage peut être définie sur «fléchir". Cette fonctionnalité permet la flexibilité et l'ajustement du contenu ou des éléments. Il crée également un espace égal entre les éléments, permettant à des éléments d'être organisés efficacement.

Syntaxe

Affichage: flexion

Selon la syntaxe ci-dessus, la valeur de la propriété d'affichage est définie comme «fléchir".

Alors, vérifions l'exemple pour ajouter de l'espace entre les images à l'aide de flex.

Exemple

Nous continuerons l'exemple précédent et définirons trois images dans le div. Après cela, définissez la valeur de la propriété d'affichage comme «fléchir»Et l'écart entre les icônes comme«25px" en utilisant le "écart" propriété:

.img
Affichage: flex;
Écart: 25px;

Vous pouvez observer que les images sont séparées par l'espace, mais lorsque le navigateur est redimensionné, les images sont coupées des bords:

Pour surmonter la limitation susmentionnée, le ««marge»La propriété est utilisée.

Méthode 3: Ajoutez de l'espace entre les images en utilisant la «marge»

En utilisant le "marge»Propriété, vous pouvez créer de l'espace entre les images dans CSS. Il ajoute une zone transparente autour d'un élément. Vous pouvez régler la marge à partir des côtés de la gauche, de la droite, du haut et du bas d'un élément. Plus précisément, c'est une propriété scolarisée pour «marge-gauche","marge à droite","marge", et "marge-fond". Toutes les valeurs des propriétés données peuvent être définies en une seule ligne.

Syntaxe

La syntaxe de la propriété de marge est:

Marge: Auto | en haut à droite en bas à gauche

La description de la syntaxe ci-dessus est donnée ci-dessous:

• auto: Il est utilisé pour ajuster les éléments en fonction du navigateur.
• haut: Il spécifie la marge du haut.
• droite: Il est utilisé pour définir la marge de la droite.
• bouton: Il est utilisé pour ajuster la marge du bas.
• gauche: Il spécifie la marge de la gauche.

Note: L'ajout de deux valeurs spécifiera les marges en haut et en bas, ainsi que de la gauche et de la droite; Cependant, l'ajout d'une valeur appliquera la marge aux quatre côtés.

Poursuivant l'exemple précédent, nous allons maintenant créer un espace entre les images.

Exemple

Ici, nous utiliserons "IMG«Pour accéder aux images ajoutées dans le HTML et définir la largeur et la hauteur des images comme«150px". Après cela, nous allons définir la marge comme «0px», Marge à droite comme«10px», Marge-fond comme«30px"Et marge-gauche comme"20px»:

img
Largeur: 180px;
hauteur: 180px;
marge: 0px 10px 30px 20px;

La sortie donnée démontre que l'espace est créé et que la disposition des images n'est pas perturbée, ou que les images ne sont pas coupées lorsque le navigateur est redimensionné:

C'est ça! Nous avons expliqué la méthode pour ajouter de l'espace entre des images en utilisant trois méthodes différentes.

Conclusion

Trois méthodes différentes de CSS peuvent être utilisées pour créer un espacement entre les images, à savoir le «grille" et "fléchir«Valeurs de la propriété d'affichage et«marge" propriété. Avec ces propriétés, vous pouvez créer des espaces entre les images. Cependant, la propriété CSS Marge fonctionne le mieux. Dans ce manuel, nous avons expliqué ces trois méthodes en détail et fourni des exemples pour chaque méthode.