Ce billet décrit :
- Quand utiliser le « padding » ou la « marge » en CSS ?
- Comment utiliser la 'marge' en CSS ?
- Comment utiliser le 'padding' en CSS ?
Quand utiliser le « padding » ou la « marge » en CSS ?
CSS ' marge ' et ' rembourrage ” Les propriétés sont utilisées pour concevoir l'interface. Ils sont également utilisés pour spécifier l'écart ou l'espace supplémentaire entre les éléments. Cependant, ces deux propriétés diffèrent l'une de l'autre en termes de fonctionnalité.
Ici, nous allons expliquer quelques distinctions entre les deux propriétés :
| marge | rembourrage |
|---|---|
| margin fournit de l'espace à l'extérieur de l'élément. | padding fournit de l'espace à l'intérieur du contenu de l'élément. |
| Nous pouvons définir une marge d'élément comme ' auto ” pour définir automatiquement la marge autour de l'élément. | le rembourrage ne peut pas être défini sur automatique. L'utilisateur doit spécifier les valeurs pour définir l'espace à l'intérieur de l'élément. |
| La marge n'a pas affecté le style d'un élément. | Lorsque nous appliquons une couleur d'arrière-plan à l'élément, cela affectera le style d'un élément. |
| Nous pouvons définir des valeurs positives et négatives comme marges. | padding ne prend en charge que les valeurs positives. |
Comment utiliser la 'marge' en CSS ?
Pour utiliser le ' marge ' propriété, d'abord, créez un ' Le résultat du code indiqué ci-dessus est mentionné ci-dessous : Maintenant, créez un autre ' Production Maintenant, appliquez la propriété 'margin' sur la classe '.margin-div': Dans le code ci-dessus, le ' .margin-div ' est utilisé pour accéder à l'élément div afin d'appliquer les propriétés répertoriées ci-dessous : Ici, vous pouvez voir que nous avons défini avec succès le ' marge « propriété au deuxième » div ' élément: Afin d'utiliser la propriété 'padding', les exemples ci-dessus ont été utilisés. Dans la seconde ' div ' conteneur, utilisez la classe ' rembourrage-div ” pour appliquer un rembourrage : Production Pour appliquer un rembourrage et d'autres propriétés CSS sur le ' .padding-div ” classe, jetez un oeil au code fourni: Dans le code mentionné ci-dessus, nous avons accédé au deuxième ' div 'élément utilisant la classe' .padding-div ”. Nous avons défini la 'couleur d'arrière-plan' et la 'taille de la police'. De plus, le « rembourrage La propriété ' est utilisée pour ajouter de l'espace autour du contenu de l'élément de chaque côté en tant que ' 50px ”. Production Nous avons expliqué les différences et les utilisations de 'padding' et 'margin' en CSS. Le SSC ' marge ' est utilisé pour définir l'espacement autour de l'élément, tandis que le ' rembourrage ” est utilisé pour ajouter un espacement autour du contenu de l'élément. Pour appliquer la propriété margin ou padding, commencez par créer un ' div ” conteneur et spécifiez la classe. Après cela, accédez à la classe par nom de classe et appliquez le ' marge ' et ' rembourrage ' Propriétés. Cet article a expliqué l'utilisation de la marge par rapport au rembourrage en CSS.
< div classe = 'Linux' >
< p > Linuxhint est l'un des meilleurs sites de tutoriels < / p >
< / div >
< div classe = 'div-marge' style = 'bordure : 1 pixel noir uni' >
< p >Linuxhint est l'un des meilleurs sites de tutoriels.< Br >
< / p >
< div >
Contexte- Couleur : RVB ( 199 , 238 , 205 ) ;
Police de caractère- Taille : moyen;
frontière : 3px RVB ( 114 , 250 , 114 ) ;
marge : 100px 100px 100px 100px ;
}
Comment utiliser le 'padding' en CSS ?
< p > Linuxhint est l'un des meilleurs sites de tutoriels < / p >
< / div >
< div classe = 'remplissage-div' style = 'bordure : 1 pixel noir uni' >
< p >Linuxhint est l'un des meilleurs sites de tutoriels.< Br >
< / p >
< / div >
Contexte- Couleur : RVB ( 199 , 238 , 205 ) ;
Police de caractère- Taille : moyen;
rembourrage : 50px 50px 50px 50px ;
}
Conclusion