Style de rembourrage HTML - CSS

Style de rembourrage HTML - CSS

La feuille de style en cascade (CSS) fournit des centaines de propriétés de style pour les éléments HTML. Parallèlement aux styles de décoration, il fournit également des propriétés pour ajuster les positions et le placement des éléments sur la page Web. Ces propriétés incluent «flotter","rembourrage","marge","position", et beaucoup plus.

Ce message couvrira:

  • Quelle est la propriété «rembourrage» dans CSS?
  • Comment spécifier la propriété «rembourrage»?

Quelle est la propriété «rembourrage» dans CSS?

Le "rembourrage«La propriété décrit la distance entre le contenu d'un élément et sa frontière. Plus précisément, cette propriété ajoute de l'espace dans l'élément, tandis que le «marge»La propriété génère de l'espace autour de l'élément. Les valeurs de la propriété de rembourrage peuvent être mesurées dans «px","em","remorqueur", ou plus. Cependant, le "remorqueur"Est la meilleure unité à utiliser avec les propriétés de marge et de rembourrage.

Préalable: créer un fichier html

Pour appliquer la propriété de rembourrage sur les éléments HTML, les utilisateurs doivent créer le fichier HTML. À cette fin, utilisez les étapes suivantes:

  • Ajouter un ""Element et attribuez-lui une classe"contenu principal".
  • Ensuite, incluez le «”Tag pour placer une image et"

    ”Tag pour inclure du texte:



La lumière de l'éducation nous rend brillants.


Passons de l'avant dans la section CSS pour appliquer le style au conteneur.

Élément de style «div»

Tout d'abord, accédez à l'élément «» ayant une classe «.contenu principal»Et appliquez les propriétés suivantes:

.contenu principal
Largeur: 400px;
marge: auto;
Border: 5px Groove RGB (151, 151, 151);

La description des propriétés susmentionnées est la suivante:

  • "largeur»Détermine la largeur de l'élément.
  • "marge»Définit l'espace autour de l'élément.
  • "frontière»Applique la bordure autour de l'élément en spécifiant les valeurs de largeur, de style et de couleur de bordure.

La sortie du code ci-dessus est représentée ci-dessous:

Comment spécifier la propriété «rembourrage»?

Dans CSS "rembourrage»La propriété a une plage de valeurs d'une à quatre. Pour une meilleure compréhension, suivez les exemples répertoriés:

  • Exemple 1: propriété CSS «rembourrage» avec une valeur
  • Exemple 2: propriété CSS «rembourrage» avec deux valeurs
  • Exemple 3: propriété CSS «rembourrage» avec trois valeurs
  • Exemple 4: propriété CSS «rembourrage» avec quatre valeurs

Exemple 1: propriété CSS «rembourrage» avec une valeur

Dans CSS, lorsque le «rembourrage«La propriété se voit attribuer une valeur, il ajoute«1rem«Espace de chaque côté du contenu de l'élément:

rembourrage: 1rem;

Sortir

Exemple 2: propriété CSS «rembourrage» avec deux valeurs

Le "rembourrage»La propriété peut être ajustée avec deux valeurs, où:

  • Le "première valeur»Représente le rembourrage (espace) en haut et en bas des côtés.
  • Le "deuxième valeur»Représente l'espace sur les côtés gauche et droit du contenu de l'élément:
rembourrage: 1rem 2rem;

Sortir

Exemple 3: propriété CSS «rembourrage» avec trois valeurs

Le CSS "rembourrage»La propriété peut être ajustée avec les trois valeurs. Ils travaillent comme suit:

  • La première valeur indique le rembourrage en haut.
  • La deuxième valeur signifie un rembourrage sur les côtés gauche et droit.
  • La troisième valeur définit le rembourrage en bas du contenu de l'élément:
rembourrage: 1rem 2rem 3rem;

Sortir

Exemple 4: propriété CSS «rembourrage» avec quatre valeurs

Le "rembourrage»La propriété avec quatre valeurs ajuste l'espace spécifié entre le contenu et la bordure de tous les côtés comme décrit ci-dessous:

  • "Première valeur»Ajoute un rembourrage en haut.
  • "Deuxième valeur»Ajoute un rembourrage sur le côté droit.
  • "Troisième valeur»Ajoute un rembourrage en bas.
  • "Quatrième valeur»Ajoute un rembourrage sur le côté gauche:
rembourrage: 2rem 3rem 1rem 2rem;

Sortir

Nous avons élaboré des styles de rembourrage HTML avec différentes valeurs en utilisant CSS.

Conclusion

Le CSS "rembourrage»La propriété augmente la distance autour du contenu de l'élément. Il a une valeur de valeur de un à quatre. "Une valeur»Signifie le même rembourrage de chaque côté du contenu de l'élément. "Deux valeurs”Définissez l'espace au fond du haut et des côtés de droite à droite. "Trois valeurs”Réglez le rembourrage en haut, à droite gauche et des côtés inférieurs du contenu de l'élément. "Quatre valeurs»Spécifiez le rembourrage unique de chaque côté. Ce message a démontré le style de rembourrage HTML dans CSS.