Tutoriel d'introduction CSS : propriété margin

Le moyen le plus simple de définir les marges est d'utiliser l'attribut margin. La marge est utilisée pour définir la distance entre les étiquettes des objets. Par exemple, s'il y a deux boîtes DIV disposées l'une au-dessus de l'autre, nous pouvons utiliser le style de marge pour obtenir la distance entre les deux boîtes au-dessus et en dessous. La propriété margin accepte n'importe quelle unité de longueur, qui peut être des pixels, des pouces, des millimètres ou des ems. la marge peut être réglée sur automatique. Une approche plus courante consiste à définir une valeur de longueur pour les marges. L'instruction suivante définit une marge de 1/4 de pouce de large de chaque côté de l'élément h1 : h1 {margin : 0.25in;} Ce qui suit définit différentes marges pour les quatre côtés de l'élément h1 et les unités de longueur utilisées. est le pixel (px) :

h1 {margin : 10px 0px 15px 5px;}

est le même que le réglage du remplissage. L'ordre de ces valeurs​​ part de la marge supérieure (haut) et tourne dans le sens des aiguilles d'une montre. autour de l'élément. De plus, vous pouvez définir une valeur en pourcentage pour margin: p {margin : 10%;}, de sorte que la marge de l'élément p soit de 10 % de la largeur de son élément parent. La valeur par défaut de la marge est 0, donc si vous ne déclarez pas de valeur pour la marge, aucune marge n'apparaîtra. Cependant, dans la pratique, les navigateurs proposent déjà des styles prédéterminés pour de nombreux éléments, et les marges ne font pas exception. Utilisez margin pour centrer la conception. L'utilisation de base est : margin:0 auto; pour centrer l'objet, mais une condition est requise, c'est-à-dire que le supérieur de l'objet doit définir le style d'attribut de centrage du contenu text-align:center. Certains navigateurs ne définissent pas le style de centrage du contenu text-align:center pour la balise body. Si l'objet conteneur sous-jacent est défini avec margin: 0 auto, la mise en page sera cependant centrée. Il est recommandé de définir un alignement de texte pour le style d'attribut body: center.

Propriété CSS Single Margin

Vous pouvez utiliser la propriété single margin pour définir une valeur pour la marge d'un côté d'un élément. Supposons que vous souhaitiez définir la marge gauche de l'élément p sur 20 px, vous pouvez utiliser la méthode suivante :

p {margin-left: 20px;}

Vous pouvez utiliser l'un des attributs suivants pour définir uniquement la marge correspondante sans directement affecte toutes les autres marges : margin-top, margin-right, margin-bottom, margin-left
Une règle peut utiliser plusieurs de ces attributs unilatéraux, par exemple :

h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}

Vous pouvez également écrivez-le comme : p {marge : 20px 30px 30px 20px;}, la logique abrégée est toujours : haut, droite, bas, gauche.

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!