Maison > Article > interface Web > Comment fonctionne l'attribut auto dans « margin: 0 auto » en CSS ?
Comment fonctionne l'attribut auto dans « margin: 0 auto » en CSS ?
- 王林avant
- 2023-08-28 10:57:02960parcourir
La propriété "margin: 0 auto" est une propriété CSS couramment utilisée qui permet aux développeurs de centrer les éléments horizontalement dans un conteneur. La valeur "auto" de l'attribut margin permet d'obtenir l'effet de centrage.
Dans cet article, nous explorerons comment fonctionne la valeur "auto" dans la propriété margin et comment l'utiliser pour réaliser un centrage horizontal. Nous discuterons également de certaines erreurs possibles et des meilleures pratiques lors de l'utilisation de la valeur "auto" dans les propriétés de marge.
Marges en CSS
Avant d'aborder ce sujet, nous devrions essayer d'acquérir quelques connaissances de base afin de comprendre ce problème. Tout d'abord, nous apprendrons ce que signifie margin en CSS, puis nous passerons à la compréhension de l'attribut auto. Ce n’est qu’après avoir appris tout cela que nous pourrons arriver à la réponse à notre question initiale.
Nous savons que le but du CSS est de styliser les pages Web afin qu'elles soient faciles à utiliser et visuellement agréables, rendant l'expérience utilisateur globale plus fluide et meilleure pour les utilisateurs. Ce style comprend de nombreux éléments tels que la couleur, la police, la taille de la police, etc. L'une des méthodes de style consiste à utiliser un espacement approprié entre les éléments.
Chaque fois que nous parlons de l'espace en dehors des limites définies d'un élément, nous parlons en fait de ses marges. Les marges nous permettent de créer une bordure invisible qui isole un élément des autres éléments. C'est un peu comme le remplissage, mais le remplissage est en fait l'espace entre les enfants d'un élément et les éléments environnants.
CSS nous permet d'avoir un très haut niveau de contrôle et de personnalisation sur les marges de nos éléments, nous pouvons utiliser margin normalement pour créer une marge où les quatre côtés sont égaux, mais nous pouvons aussi le faire en spécifiant une marge que nous font en fait référence à Définir les marges pour des côtés spécifiques individuellement. Par exemple,
margin : 0 // statement 1 margin top : 25px // statement 2
La marge définie par l'instruction 1 définira toutes les marges de l'élément à 0, tandis que la marge définie par l'instruction 2 ne modifiera que la marge supérieure et la définira sur 25 pixels.
Nous pouvons spécifier les marges de différentes manières -
Nous pouvons utiliser une longueur personnalisée.
Nous pouvons spécifier une valeur en pourcentage qui changera en fonction de la taille de l'écran de l'utilisateur.
Nous pouvons également rendre les marges héritables, ce qui définira les marges de l'élément actuel sur celles de son élément parent.
Mais que se passe-t-il si nous ne savons pas quelle valeur nous devons utiliser lors de la définition des marges.
Attributs automatiques
CSS nous fournit un attribut pour que le navigateur puisse calculer et définir la marge de l'élément, qui est l'attribut auto. Cette propriété permet aux développeurs d'utiliser plus facilement les marges car nous n'avons pas besoin de connaître à l'avance la valeur réelle qui sera utilisée, mais de laisser le navigateur la calculer.
Commençons par comprendre comment cela fonctionne. Si nous spécifions les marges d'un élément comme auto, cela donnera des marges égales de tous les côtés en calculant d'abord la largeur et la taille de l'élément.
La traduction chinoise deExemple
est :Exemple
Considérons un div avec des dimensions de 500 pixels sur 300 pixels. Si nous ne spécifions aucune marge, il s'alignera automatiquement sur le coin supérieur gauche de l'écran. D'un autre côté, spécifier les marges comme auto les centrera dans le conteneur parent, dans ce cas la balise body.
<!DOCTYPE html> <html lang="en"> <head> <title>Margin: 0 auto example</title> </head> <body style="background-color: coral; margin: 0; padding: 0; font-size: larger; font-weight: bold;"> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: aqua;">No set margin</div> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: auto;">Margin set to 0</div> </body> </html>
Utiliser les marges : 0 auto
Maintenant, que se passe-t-il si nous essayons de définir la marge en utilisant deux valeurs ? Chaque fois que nous essayons d'utiliser des marges et de fournir deux valeurs, la première valeur est considérée comme la valeur des marges supérieure et inférieure, tandis que la seconde valeur est utilisée pour les marges gauche et droite.
Notre question est d'expliquer : "Comment cela fonctionnera-t-il si nous utilisons l'attribut auto comme deuxième valeur de la marge.
La réponse est : "Il alignera verticalement l'élément au centre de son élément parent en calculant automatiquement les marges gauche et droite
." La traduction chinoise deExemple
est :Exemple
Considérez la même chose que l'exemple ci-dessus, mais définissez les marges sur 0 auto.
<!DOCTYPE html> <html lang="en"> <head> <title>Margin: 0 auto example</title> </head> <body style="background-color: coral; margin: 0; padding: 0; font-size: larger; font-weight: bold;"> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: 0 auto;">Margin set to 0 auto</div> </body> </html>
Conclusion
Dans cet article, nous avons découvert la signification de margin en CSS, le rôle de la propriété auto en CSS et comment son comportement change lorsque nous l'utilisons comme deuxième valeur de marge. Notre réponse initiale a été d'aligner verticalement l'élément avec son parent en calculant automatiquement les marges gauche et droite.
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!