La propriété de marge dans CSS a expliqué

Les marges sont les espaces créés (pour une meilleure esthétique) autour de n'importe quel élément. La marge est automatiquement définie par le navigateur utilisé. Cependant, les marges définies par l'utilisateur peuvent être créées à l'aide de la propriété CSS Marge. Les marges ont quatre côtés (généralement cela dépend de l'élément), et la marge de chaque côté peut être définie en utilisant la propriété de marge.

La property de marge permet de définir les marges sur les côtés individuellement ou on peut créer des marges pour plusieurs côtés simultanément. Dans ce guide descriptif, la propriété de marge de CSS est expliquée et a les résultats d'apprentissage suivants.

• Travail des biens de marge dans CSS
• fonctionnement de la propriété sténloque de marge
• Utilisation de la propriété de marge avec des exemples

Comment fonctionne la propriété de marge dans CSS

La propriété de marge dans CSS peut fonctionner dans diverses circonstances où vous devez soit donner des marges aux côtés (individuellement) ou donner des marges en utilisant une propriété raccourci (plusieurs côtés à la fois). Le travail dans les deux situations est discuté ici.

La marge peut être donnée aux côtés individuels en utilisant la syntaxe en conséquence.

sélecteur marge-top: valeur; // sur le côté supérieur
sélecteur marge-fond: valeur; // sur le côté inférieur
sélecteur marge-gauche: valeur; // sur le côté gauche
sélecteur marge-droite: valeur; // sur le côté droit

Le sélecteur peut être n'importe quel élément alors que la valeur est le nombre utilisé pour donner une limite de marge spécifique. La valeur peut être utilisée avec plusieurs unités de mesure I.e., Auto, longueur (PX, CM, PT), pourcentage (%) et héritage (selon la classe parentale). Le PX est la mesure absolue tandis que l'EM, le REM et le pourcentage sont les mesures relatives et sont meilleures (comparées à PX) adaptées aux résultats réactifs.

En dehors des marges de ces côté individuel, la propriété sténographique de la marge peut également être utilisée pour donner les marges à plusieurs côtés simultanément. La syntaxe de la propriété sténographique de marge est fournie ci-dessous:

sélecteur margin: valeur1 valeur2 valeur3 valeur 3;

La valeur1, la valeur2, la valeur3 et la valeur représentent les côtés supérieur, droit, inférieur et gauche d'un élément.

Comment utiliser la propriété de marge dans CSS

Cette section fournit quelques exemples qui montrent l'utilisation de la propriété de marge dans CSS.

Exemple 1: Donner des marges aux côtés individuels
Dans cet exemple, le code écrit ci-dessous est utilisé pour donner des marges aux côtés individuels.

Propriété de marge dans CSS

Utilisation du droit de marge de 5px
Utilisation de la marge en bas de 5px
Utilisation de marge en haut de 5px
en utilisant la marge à gauche de 5px

La description du code est fournie ci-dessous

• Un style CSS pour Div est défini en donnant la largeur, la propriété flottante et la bordure
• Quatre classes CSS sont créées nommées «Top», «Rig», «Bot» et «LEF» qui contient la marge (5px) dans chaque classe
• Ces quatre classes sont utilisées à l'intérieur des divisions (div)

L'image du code est illustrée ci-dessous

Sortir:

Exemple 2: Donner des marges à plusieurs côtés simultanément
L'exemple ci-dessus a fourni les marges aux côtés individuels. Le code suivant donne la marge à plusieurs côtés simultanément

Propriété de marge dans CSS

en utilisant une marge de 5% de tous les côtés
en utilisant une marge de 5% en haut / en bas et 10% à gauche / à droite
Utilisation de la marge de 2 et 3EM en haut et en bas et 4EM à droite / gauche
Utilisation de la marge de 2,4,6,8 pixels en haut, à droite, en bas, à gauche respectivement

Le code ci-dessus est décrit comme

• Quatre classes CSS sont créées nommées «Sing», «Doub», «Trip» et «All»
• La classe «Sin» donne une marge de% à tous les côtés et la classe «Doub» donne une marge de 5% en haut / en bas et 10% à droite / gauche
• La classe «Trip» donne la marge de 2EM et 4EM pour atteindre un fond et 3em aux côtés droite / gauche
• La classe «All» donne une marge de 2, 4, 6 et 8px sur les côtés supérieurs, droits, inférieurs et gauche

L'image du code est illustrée ci-dessous

Sortir:

D'après les exemples ci-dessus, vous auriez appris l'applicabilité de la propriété de marge dans les contextes suivants:

• Application de la marge-propriété à toutes les côtés individuellement
• Donner des marges en utilisant la propriété raccourci de marge

Conclusion

La propriété de marge dans CSS est pratiquée en donnant des marges en fonction des propriétés définies par l'utilisateur. Cet article démontre le travail et l'utilisation de la propriété de marge dans CSS. La propriété de marge dans CSS peut être utilisée pour donner des marges à chaque côté individuellement et la propriété raccourci de marge peut être utilisée pour donner des marges à plusieurs côtés simultanément.