Quelles sont les différences entre margin et padding 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 padding et de la marge

En CSS, la marge fait référence à la distance entre son propre cadre 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. Structure grammaticale.

(1)

padding-left:10px; remplissage gauche

(2)

padding-right:10px remplissage droit Distance;

(3)

padding-top:10px; rembourrage supérieur

(4)

padding-bottom:10px; rembourrage inférieur Distance

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

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

(7) rembourrage : 10px ; 20px 30px ; Remplissage supérieur, gauche et droit

(8) remplissage : 10px 20px 30px 40px ; Remplissage supérieur, droit, inférieur et gauche

2. Possible La valeur prise est

🎜>

(1) length spécifie la longueur du remplissage en unités spécifiques

(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 que le remplissage doit être hérité de l'élément parent

3. Problèmes de compatibilité du navigateur

(1) Tous les navigateurs prennent en charge l'attribut padding (2) Aucune version d'IE ne prend en charge la valeur de l'attribut "inherit"

2. margin

1. Structure grammaticale

(1) marge gauche:10px; 2)

marge-droite

:10px; marge droite(3) marge-haut:10px; marge supérieure

(4) marge-bas:10px ; marge inférieure

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

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

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

2. Valeurs possibles

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

(2) % La marge basée sur la largeur de l'élément parent Longueur

(3) auto Le navigateur calcule les marges

(4) hériter stipule que les marges doivent être héritées de l'élément parent

Problèmes de compatibilité du navigateur

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

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

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!