Quelles sont les unités de marge CSS ?

Les unités de marge CSS incluent px, %, em, rem, vw et vh, vmin et vmax, ex et ch, pt et pc, etc. Introduction détaillée : 1. px, unité de longueur fixe ; 2. %, l'unité de marge est calculée par rapport à la largeur de l'élément parent ; 3. em, l'unité de marge est calculée par rapport à la taille de la police de l'élément ; . rem, Unités de calcul des marges par rapport à la taille de la police de l'élément racine ; 5. vw et vh, unités relatives à la largeur et à la hauteur de la fenêtre d'affichage ; 6. vmin et vmax, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell G3.

Les unités de marge CSS sont les suivantes :

Pixel (px) : Le pixel est l'une des unités de marge les plus couramment utilisées. C'est une unité de longueur fixe qui représente un point sur l'écran. En CSS, vous pouvez définir les marges d'un élément à l'aide de valeurs de pixels, par exemple : margin : 10px.

Pourcentage (%) : Le pourcentage est l'unité utilisée pour calculer les marges par rapport à la largeur de l'élément parent. Par exemple, si la largeur de l'élément parent est de 200 px et que vous définissez la marge sur 10 %, la marge sera de 20 px. Les unités de pourcentage peuvent être utilisées pour définir les marges horizontales et verticales, par exemple : margin-top : 10 %.

em : em est l'unité utilisée pour calculer les marges par rapport à la taille de la police de l'élément. Par exemple, si la taille de police d'un élément est de 16 px et que la marge est définie sur 2em, la marge sera de 32 px. L'unité em peut également être utilisée pour définir des marges horizontales et verticales, par exemple : margin-left : 1,5em.

rem : rem est l'unité utilisée pour calculer les marges par rapport à la taille de la police de l'élément racine. L'élément racine est généralement un élément HTML. Contrairement à l'unité em, la valeur de l'unité rem n'est pas affectée par son élément parent. Par exemple, si la taille de police de l'élément racine est de 16 px et que la marge est définie sur 2rem, la marge sera de 32 px.

vw et vh : vw et vh sont des unités relatives à la largeur et à la hauteur de la fenêtre. La fenêtre d'affichage est la zone visible de la fenêtre du navigateur ou de l'écran de l'appareil. vw représente le pourcentage de la largeur de la fenêtre et vh représente le pourcentage de la hauteur de la fenêtre. Par exemple, si la largeur de la fenêtre d'affichage est de 1 000 px et que les marges sont définies sur 10vw, les marges seront de 100 px.

vmin et vmax : vmin et vmax sont des pourcentages par rapport au plus petit ou au plus grand de la largeur et de la hauteur de la fenêtre. vmin sera calculé en fonction de la plus petite taille dans la fenêtre et vmax sera calculé en fonction de la plus grande taille dans la fenêtre. Par exemple, si la largeur de la fenêtre d'affichage est de 1 000 px, la hauteur de la fenêtre d'affichage est de 800 px et les marges sont définies sur 10 vmin, les marges seront de 80 px.

ex et ch : ex et ch sont les unités dans lesquelles les marges sont calculées par rapport à la hauteur "x" et à la largeur des caractères "0" de la police. Ces unités sont généralement utilisées pour définir les marges associées à une police spécifique. Par exemple, si la hauteur « x » de la police est de 10 px et que les marges sont définies sur 2ex, les marges seront de 20 px.

pt et pc : pt et pc sont des unités d'impression, utilisées pour définir les marges lors de l'impression. pt signifie 1/72 de pouce, pc signifie 12 points (1 point équivaut à 1/72 de pouce). Ces unités sont rarement utilisées dans le développement Web et se trouvent plus couramment dans le monde de l'impression et de l'édition.

Les unités de marge ci-dessus sont courantes en CSS. En fonction des besoins spécifiques et des exigences de conception, le choix des unités appropriées pour définir les marges des éléments peut rendre la mise en page plus flexible et contrôlable.

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!