Ajouter un espace entre les éléments HTML uniquement en utilisant CSS

L'espace entre l'élément HTML joue un rôle crucial dans les documents. Il est difficile pour un utilisateur de scanner rapidement une page et de déterminer ce qui est lié et ce qui ne l'est pas s'il n'y a pas de lacunes. Par conséquent, garder un espace entre tous les éléments du document est important. À cette fin, il existe différentes méthodes utilisées dans chaque langue pour ajouter de l'espace entre les éléments, y compris CSS.

Ce tutoriel démontrera la méthode pour ajouter de l'espace entre les éléments HTML à l'aide de propriétés CSS.

Comment ajouter / insérer un espace entre les éléments HTML uniquement en utilisant CSS?

Pour ajouter de l'espace entre les éléments HTML uniquement à l'aide de CSS, utilisez le «»Élément pour ajouter des données à la page HTML. Ensuite, accédez à l'élément et appliquez "afficher"Avec les valeurs"grille","Grid-Template Rows / Colonne", et "grille»Propriétés CSS.

Pour ce faire, suivez la procédure mentionnée.

Étape 1: Faites un conteneur div

Tout d'abord, utilisez le «»Élément pour faire un conteneur div dans la page HTML. De plus, insérez un attribut de classe et spécifiez un nom pour l'élément de classe pour une utilisation ultérieure.

Étape 2: Créer un conteneur div imbriqué

Ensuite, créez un autre conteneur Div en suivant la même procédure.

Étape 3: Ajouter des données à l'aide de l'élément «Span»

Après cela, utilisez le «»Élément entre le conteneur Div imbriqué pour insérer des données:

Objet 1
Article 2
Article 3





Article 4
Article 5
Article 6

Étape 4: Conteneur de style «div»

Accédez au conteneur principal Div à l'aide du nom de classe comme «.principal»:

.principal
Border: 4px vert massif;
rembourrage: 30px;
marge: 40px;

Ensuite, appliquez les propriétés suivantes:

• "frontière»La propriété est utilisée pour spécifier la limite autour de l'élément.
• "rembourrage”Attribution du côté extérieur de l'espace de l'élément dans une bordure définie.
• "marge»Détermine l'espace dans une page HTML autour de la bordure définie.

Sortir

Étape 5: Conteneur de style «Span»

Maintenant, accédez au «portée”Container et appliquez les propriétés CSS mentionnées dans le bloc de code ci-dessous:

portée
Border: 3px groove bleu;
Color en arrière-plan: RVB (240, 224, 137);
Texte-aligne: Centre;

Ici:

• "Couleur de l'arrière plan»La propriété définit la couleur à l'arrière de l'élément.
• "alignement de texte”Est ​​utilisé pour définir l'alignement du texte dans l'élément défini.

Étape 6: Ajouter un espace entre les éléments de la colonne

Maintenant, utilisez le «identifiant"Selecteur"#"Et la valeur du" identifiant«Pour accéder au conteneur. Ensuite, appliquez les propriétés énoncées ci-dessous pour ajouter de l'espace entre les éléments:

#colonne
Affichage: grille;
marge: 20px 40px;
grille-template-colonnes: répéter (remplissage automatique, auto);
Grid-Gap: 14px;

Ici:

• "afficher»La propriété détermine le comportement d'affichage de l'élément d'accès. Pour ce faire, la valeur de cette propriété est définie comme «grille". La disposition de la grille CSS définit un système de grille multidimensionnel à CSS.
• "colonne de la grille”Alloue le nombre et la taille des colonnes à l'intérieur du récipient de grille.
• "grille»Ajoute de l'espace entre les éléments qui ne fonctionne que sur les articles de la grille.

Étape 7: ajouter de l'espace entre les éléments en rangées

Maintenant, accédez au conteneur DIV intérieur à l'aide de la valeur ID et appliquez les propriétés CSS:

#Lignes
Affichage: grille;
marge: 20px 40px;
Grid-Template Rows: Repeat (Auto-Fill, Auto);
grille-gap: 20px;

Ensuite, appliquez le «afficher","marge","grille", et "lignes de tempête de grille" propriétés. Le "lignes de tempête de grille»Définissez la hauteur et le nombre des lignes dans une disposition indiquée de la grille:

Vous avez appris à ajouter de l'espace entre les éléments HTML avec uniquement des propriétés CSS.

Conclusion

Pour ajouter l'espace entre les éléments HTML uniquement à l'aide de CSS, utilisez le «»Élément pour ajouter des données à la page HTML. Ensuite, accédez à l'élément et appliquez "afficher"Avec les valeurs"grille","Grid-Template Rows / Colonne", et "grille»Les propriétés CSS sont utilisées. Cet article a expliqué la procédure d'ajout d'espace entre les éléments HTML uniquement en utilisant CSS.