Comment utiliser la propriété CSS margin ? tutoriel d'utilisation des propriétés de marge CSS-tutoriel CSS-php.cn

Comment utiliser la propriété CSS margin ? tutoriel d'utilisation des propriétés de marge CSS

云罗郡主

Libérer： 2018-11-07 14:14:12

original

8499 Les gens l'ont consulté

En CSS, il existe un attribut de marge important. Beaucoup de gens ne savent pas ce qu'est l'attribut de marge CSS ? Comment l'utiliser ? Voici un résumé du tutoriel sur l'utilisation de la propriété CSS margin.

Comment utiliser la propriété CSS margin ? tutoriel dutilisation des propriétés de marge CSS

margin est l'abréviation utilisée par CSS pour toutes les propriétés de marge CSS dans une instruction, car margin contrôle la distance entre les éléments au niveau du bloc en CSS, donc les deux ne sont pas visibles. [Apprentissage recommandé : Tutoriel CSS3]

1 : Comment utiliser l'attribut CSS margin

L'attribut margin contient de nombreux attributs, comme indiqué ci-dessous :

marge gauche : Cela signifie définir la distance par rapport à la marge intérieure gauche ;

marge supérieure : Cela signifie définir la distance de bloc de l'élément supérieur ;

marge droite : Cela signifie définir la distance Distance du bloc de l'élément droit ;

marge inférieure : signifie définir la distance du bloc inférieur

2 : tutoriel d'utilisation de l'attribut de marge CSS

1.margin left Utilisation :

margin left: 50px; La syntaxe est suivie d'un nombre ou d'un pourcentage. Cette syntaxe signifie 50 pixels du bloc d'élément gauche, soit 50 % de la distance de l'élément.

Afin d'observer l'exemple, nous utilisons deux cases :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>margin-left实例 www.divcss5.com</title> 
<style> 
.php-a,.php-b 
{float:left; width:150px; height:120px; border:1px solid #F00} 
.php-b{ margin-left:50px} 
.php-c{ margin-left:50px} 
</style> 
</head> 
<body> 
<div class="php-a"></div> 
<div class="php-b"></div> 
</body> 
</html>

Copier après la connexion

Nous pouvons changer la valeur et observer les changements, mais l'effet est la position et la taille de l'espacement gauche de l'élément.

2. L'utilisation de la marge droite est exactement l'opposé de la marge gauche, qui est définie comme le nombre de pixels éloignés de l'élément droit.

3.margin top : 50px, la syntaxe est suivie d'un nombre, ce qui signifie que l'espacement supérieur est de 50 pixels, ou il peut également être exprimé en pourcentage.

4. L'utilisation de la marge inférieure est similaire à l'utilisation de la marge supérieure, et les directions sont opposées.

Si nous voulons utiliser margin:10px pour représenter le haut, le bas, la gauche et la droite, nous devons penser à la rotation de la marge dans le sens des aiguilles d'une montre. [Lecture recommandée : margin : Explication détaillée de l'utilisation de l'attribut auto ]

Ce qui précède explique comment utiliser l'attribut CSS margin ? Une introduction complète au didacticiel sur la façon d'utiliser l'attribut CSS margin. Si vous souhaitez en savoir plus sur les didacticiels vidéo CSS3, veuillez prêter attention au site Web PHP chinois.

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!