À quoi sert la marge CSS ?

Tout d'abord, nous devons savoir ce que margin signifie. L'attribut margin est l'attribut raccourci de CSS permettant de définir tous les attributs de marge dans une seule instruction. élément. Ils sont transparents et invisibles.

l'attribut margin inclut la marge gauche : distance par rapport au bloc d'élément gauche (définie à partir de la gauche marge intérieure  : distance par rapport au bloc d'élément supérieur (supérieur) (définie à partir du haut) ; distance du bloc d'élément ); marge droite : distance par rapport au bloc d'élément droit (définir la distance par rapport au bloc d'élément droit bas : distance par rapport au bloc d'élément inférieur (définir la distance par rapport au bloc d'élément inférieur) ; bloc d'éléments). Son diagramme de construction en deux dimensions est visible dans le diagramme en deux dimensions de l'attribut CSS.

Utilisation de la marge gauche : margin-left:10px; Cela signifie 10 pixels du bloc d'élément gauche, qui peut être suivi d'un pourcentage tel que (margin-left:10%; 10 % de la distance du bloc de l'élément gauche) tutoriel css margin-left ;

utilisation de la marge droite : margin-right:10px Cela signifie que la distance du bloc par rapport à l'élément droit est de 10 pixels, qui peut être suivi d'un pourcentage tel que (marge-droite : 10 % ; 10 % de distance par rapport au bloc d'éléments à droite)

utilisation de la marge supérieure : marge-haut :10px ; ; Cela signifie 10 pixels du bloc d'éléments supérieur et peut être suivi d'un pourcentage tel que (margin-top:10%; 10% distance du bloc d'éléments supérieur) css margin-top; utilisation :

margin-bottom

:10px; Cela signifie la distance depuis le bord inférieur. La distance du bloc d'élément est de 10 pixels, qui peut être suivie d'un pourcentage tel que (marge-bottom : 10 % ; 10 % de distance depuis le bloc d'éléments du bas) css margin-bottom; Faites attention au lien "-" au milieu de la marge, définissez Utiliser " : " pour attribuer une valeur de distance, terminez par " ; ", et utilisez toutes les lettres minuscules demi-chasse.

Si vous devez définir la valeur de marge pour les côtés gauche et droit, vous pouvez le faire en abréviation pour optimiser le CSS.

Par exemple, l'abréviation est :

margin:10px ce qui signifie que la distance entre les blocs d'éléments supérieur, inférieur, gauche et droit est de 10px (10 pixels), ce qui est égal à margin-top:10px; margin-bottom:10px; margin-left :10px; margin-right:10px; abréviation pour le même effet

margin:5px 10px; les blocs d'éléments sont de 5 px et la distance entre les blocs d'éléments gauche et droit est de 10 px, ce qui est égal à margin-top:5px; margin-bottom :5px; margin-left:10px margin-right:10px; effet ;

margin:5px 6px 7px ; ce qui signifie que la distance entre le bloc d'éléments supérieur est de 5px, la distance entre le bloc d'éléments inférieur est de 7PX et la distance entre les blocs d'éléments gauche et droit est de 6px, égale à margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; abréviation pour le même effet

margin:5px 6px 7px 8px ; la distance entre le bloc d'éléments de droite est de 6 px, la distance entre le bloc d'éléments inférieur est de 7 px et la distance entre le bloc d'éléments de gauche est de 8 px, ce qui est égal à margin-top:5px margin-right:6px margin-bottom ; :7px; margin-right:8px; abréviation pour le même effet ;

Il existe de nombreuses façons d'utiliser l'attribut margin de CSS. Les amis qui en ont besoin peuvent également continuer à faire attention aux autres. mises à jour sur ce site.

Lecture connexe :

Conseils pour dessiner divers graphiques de base avec CSS3

html et css Tutoriel sur la création de QQ Penguin

Comprenez-vous ces principes CSS ?

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!