Quand et pourquoi la marge automatique ne fonctionne pas dans CSS
Dans cet article, nous expliquerons quand et pourquoi la marge automatique ne fonctionne pas dans CSS.
Qu'est-ce que la propriété de marge?
CSS "marge»La propriété est utilisée pour créer un espace vacant autour de l'élément, qui pourrait être de gauche, de droite, de haut et de bas. L'espace défini se déroule toujours en dehors de l'élément HTML sélectionné.
Syntaxe
Marge: longueur | auto;La valeur "longueur»Fait référence à la marge des éléments, qui peuvent être spécifiés en REM, PT, PX et dans d'autres unités. Valeur "auto»Permet au navigateur d'ajuster la marge.
Pour apaiser profondément la propriété de marge, vous pouvez consulter cet article dédié.
Quand et pourquoi la marge automatique ne fonctionne pas dans CSS?
Chaque élément HTML a un type d'affichage par défaut, l'un est «bloc", Et l'autre est"en ligne". Dans HTML, certains sont des éléments de niveau de bloc, et certains sont des éléments en ligne par défaut. Les éléments de niveau de bloc ont prédéfini une largeur de 100%, tandis que les éléments en ligne n'ont pas de largeur ou de rembourrage prédéfini.
Élément HTML de type bloc
Ici dans notre fichier html, deux " <> Bloquer
Bloc
La valeur d'affichage en tant que bloc sera appliquée par défaut
élément et il consommera la largeur de 100% comme indiqué ci-dessous:
Maintenant, ajoutons le "marge«Propriété avec«auto”Valeur à notre élément de type de bloc
le long de la "largeur" de "50px»:
pLargeur: 50px;
marge: auto;
Après avoir enregistré le code mentionné, notez que la largeur prédéfinie a été remplacée avec 50px et marge auto a ajusté l'élément au centre:
Passons de l'avant vers des éléments HTML de type en ligne.
Élément HTML de type en ligne
Comme l'image ci-dessous montre que lorsque nous avons déclaré du texte dans des balises, ils n'ont consommé aucun espace; C'est uniquement parce que la valeur d'affichage en ligne a été appliquée par défaut sur cet élément:
Maintenant, si nous appliquerons la propriété de largeur ou la propriété de marge avec une valeur automatique sur l'élément Span. En conséquence, aucun effet n'aura lieu. Parce que lorsque l'affichage est appliqué, il fait que l'élément ne consomme que l'espace qui existe dans ses balises.
Conseil bonus
Si la propriété d'affichage d'un élément est définie sur Inline par défaut, vous pouvez la remplacer en spécifiant le bloc de valeur de la propriété d'affichage par vous-même.
Jetez un œil ci-dessous à l'exemple expliqué.
Exemple
Utilisons intentionnellement un élément avec une valeur en ligne prédéfinie, telle que:
> En ligne
Dans l'étape suivante, utilisez la propriété d'affichage le long de la valeur "bloc". Réglez la largeur sur 50px et marge sur Auto comme expliqué:
portéebloc de visualisation;
Largeur: 50px;
marge: auto;
Sortir
Nous avons élaboré quand et pourquoi la marge automatique ne fonctionne pas dans CSS.
Conclusion
La marge automatique ne fonctionne pas avec des éléments qui ont un affichage en ligne par défaut, comme Span. Seuls les éléments avec un bloc d'affichage prédéfini fonctionnent avec la marge automatique. Cependant, vous pouvez remplacer le comportement en ligne d'un élément et le faire se comporter comme un élément de type bloc. Cet article a expliqué pourquoi et quand la marge automatique ne fonctionne pas dans CSS.