La différence entre le remplissage et la marge en CSS

En CSS, la marge fait référence à la distance entre sa propre bordure et la bordure d'un autre conteneur, qui est la distance à l'extérieur du conteneur. En CSS, le remplissage fait référence à la distance entre son propre cadre et la bordure d'un autre conteneur à l'intérieur de lui-même, qui est la distance à l'intérieur du conteneur.

Ce qui suit explique l'utilisation courante du remplissage et de la marge

1.

(1) padding-left : 10px ; padding-gauche (2) padding-right : 10px ; 10px ; rembourrage supérieur

(4) rembourrage inférieur : 10px ; rembourrage inférieur

(5) rembourrage : 10px ; : 10px 20px ; remplissage supérieur, inférieur, gauche et droit

(7) remplissage : 10px 20px 30px ; remplissage supérieur, gauche et inférieur

(8) remplissage : 10px 20px 30px 40px ; , remplissage droit, bas, gauche

2. Valeurs possibles

(1) longueur spécifie le remplissage en unités spécifiques Longueur

(2. ) % La longueur du remplissage en fonction de la largeur de l'élément parent

(3) auto Le navigateur calcule le remplissage (4) hériter stipule qu'il doit hériter du remplissage de l'élément parent

3. Problèmes de compatibilité des navigateurs

(1) Tous les navigateurs prennent en charge l'attribut padding (2) N'importe quelle version d'IE le fait. ne prend pas en charge la valeur de l'attribut "hériter"

2. margin

1. Structure syntaxique

(1)margin-. gauche:10px; marge gauche(2) marge-droite:10px; marge droite

(3) marge-top:10px haut Marge externe (4) marge-bas : 10px ; marge externe inférieure

(5) marge : 10px ; marge externe unifiée sur les quatre côtés

(6) marge : 10px 20px ; marges

(7) marge : 10px 20px 30px ; marges supérieure, gauche, droite, inférieure

(8) marge : 10px 20px 30px 40px ; >

2. Valeurs possibles

(1) longueur spécifie la longueur de la marge en unités spécifiques

(2)% Le longueur de la marge en fonction de la largeur de l'élément parent

(3) auto Le navigateur calcule la marge

(4) hériter précise que la marge doit être héritée de l'élément parent

3. Problèmes de compatibilité des navigateurs

(1) Tous les navigateurs prennent en charge l'attribut margin

(2) Aucune version d'IE ne prend en charge la valeur de l'attribut "hériter"

3. La différence entre margin et padding est représentée par un diagramme :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!