La propriété de rembourrage dans CSS a expliqué
Le rembourrage et les marges sont des phénomènes interconnectés car les deux propriétés ont tendance à créer de l'espace autour des éléments. Cependant, la différence est que le rembourrage crée de l'espace à l'intérieur des bordures, et la marge ajoute de l'espace à l'extérieur de la bordure. Ce message informatif décrit le travail et l'utilisation des biens de rembourrage dans CSS.
Comment fonctionne la propriété de rembourrage dans CSS
Le but principal de la propriété de rembourrage est d'ajouter de l'espace autour des éléments. Le rembourrage peut être utilisé de l'une des manières suivantes:
Utilisation de la propriété de rembourrage sur les côtés individuellement
Le rembourrage peut être donné aux côtés individuels en émettant la syntaxe suivante:
sélecteur padding-top: valeur; // sur le côté supérieursélecteur padding-droite: valeur; // sur le côté droit
sélecteur padding-bottom: valeur; // sur le côté inférieur
sélecteur paddding-left: valeur; // sur le côté gauche
Les instances de la syntaxe ci-dessus sont décrites ci-dessous:
- Le sélecteur est un élément ou peut se référer à la classe CSS
- Le padding-top, le rembourrage droit, le bassin et le padding-gauche représentent les côtés de rembourrage
- La valeur définit l'espace qui serait fourni, et la valeur peut avoir une unité de mesure I.e., longueur (px, cm, rem, em),% (pourcentage selon l'élément), auto (tel que défini par le navigateur).
Note: Les valeurs mesurées en Px sont absolues (fixes) tandis que les valeurs en%, REM et EM sont utilisées pour la réactivité et sont ajustées automatiquement.
Utilisation de la propriété raccourci du rembourrage
La propriété raccourci du rembourrage peut être utilisée pour ajouter de l'espace à divers côtés simultanément. La syntaxe suivante est pratiquée à l'aide de la propriété raccourci du rembourrage dans CSS.
Sélecteur padding: valeur1 valeur2 valeur3 valeur 4;Dans la syntaxe ci-dessus, la valeur1, la valeur 2, la valeur3 et la valeur représentent le côté supérieur, droit, en bas et côté gauche de l'élément.
Comment utiliser la propriété de rembourrage dans CSS
Cette section comprend divers exemples qui définissent l'utilisation de la propriété de rembourrage dans CSS.
Exemple 1: Utilisation de la propriété de rembourrage sur les côtés individuels
Le code suivant pratique la propriété de rembourrage sur tous les côtés individuellement.
Propriété de rembourrage dans CSS
Utilisation du padding dans PX
Utilisation du rembourrage à droite dans EM
Utilisation du padding-boot en%
Utilisation du padding-gauche dans PX
La description du code est donnée ci-dessous
- La largeur de tous les paragraphes serait «en forme» pour mieux comprendre le rembourrage
- Quatre classes CSS nommées «Top», «Rig», «Bot» et «LEF» se réfèrent à des propriétés de rembourrage, de rembourrage, de rembourrage et de rembourrage
- Les classes «haut» et «LEF» utilisent le «PX» comme unité de mesure pour le rembourrage alors que les classes «Rig» et «Bot» pratiquent «EM» et «%» comme une unité de mesure pour le rembourrage
- Les quatre paragraphes utilisent les classes CSS pour mettre en œuvre le rembourrage sur ces paragraphes
L'image du code est affichée ici
Sortir
Exemple 2: Utilisation de la propriété de rembourrage sur plusieurs côtés simultanément
La propriété raccourci de rembourrage vous permet d'ajouter un rembourrage à plusieurs côtés simultanément et ici il est pratiqué en utilisant le code suivant.
Propriété de rembourrage dans CSS
Utilisation du rembourrage dans PX
Utilisation du rembourrage de 3% en haut / en bas et 6% à gauche / à droite
Utilisation du rembourrage 2em en haut / en bas et 3em à droite / gauche
Utilisation du rembourrage 5px sur tous les côtés
sauter la propriété de rembourrage sur le côté gauche
La description du code est fournie ci-dessous
- défini divers styles tels que la couleur arrière, la largeur et le style de la frontière pour tous les paragraphes
- Cinq cours CSS sont utilisés nommés «All», «Trio», «Duo», «Nano» et «Skip».
- La classe «tout» permet d'ajouter différentes valeurs de rembourrage à tous les côtés
- La classe «trio» ajoute une valeur de rembourrage de 3% en haut / en bas et 6% à droite / gauche
- La classe «duo» permet à la propriété de rembourrage en haut / en bas par 2em et à droite / gauche par 3EM
- Le «nano» ajoutera la valeur de rembourrage 5px à tous les côtés
- La classe «Skip» ajoute un rembourrage aux trois côtés et il sauterait le côté gauche (car sa valeur est 0 dans la classe CSS ci-dessus) sur les côtés.
Note: En plus de sauter le rembourrage sur le côté gauche, tout autre côté peut être sauté en utilisant 0 valeur à l'endroit.
L'image du code est illustrée ci-dessous
Sortir
À partir de la sortie ci-dessus, le concept de propriété de rembourrage dans divers scénarios peut être obtenu.
Les exemples ci-dessus vous permettent d'apprendre la fonctionnalité du rembourrage dans les contextes suivants:
- Utilisation de la propriété de rembourrage de chaque côté individuellement
- Utilisation de la propriété de rembourrage avec diverses valeurs de mesure (PX,% et EM)
- Utilisation de la propriété raccourci du rembourrage pour ajouter un rembourrage sur plusieurs côtés simultanément ou sauter n'importe quel côté
Conclusion
Le rembourrage est la propriété utilisée pour créer de l'espace autour d'un élément. Le rembourrage peut être fourni aux équipes individuelles en utilisant, un padding-top, un rembourrage à droite, un padding-boot et un padding-gauche. Ce poste informatif éclaire le mécanisme de travail et l'utilisation de la propriété de rembourrage dans CSS. En outre, nous avons également fourni des conseils pour travailler sur des propriétés scolareuses de rembourrage qui contient l'effet combiné du padding-top / droit / en bas / gauche et est appliqué sur plusieurs côtés simultanément.