Comment définir les marges CSS

L'espace blanc entourant la bordure d'un élément est constitué de marges. La définition des marges crée un « espace blanc » supplémentaire à l’extérieur de l’élément.

Le moyen le plus simple de définir les marges est d'utiliser la propriété margin, qui accepte n'importe quelle unité de longueur, valeur en pourcentage ou même valeur négative.

Propriété de marge CSS Propriété de marge .

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. La déclaration suivante définit des marges de 1/4 de pouce de large de chaque côté de l'élément h1 :

h1 {margin : 0.25in;}

L'exemple suivant définit différentes marges pour les quatre côtés de l'élément h1, en utilisant les unités de longueur en pixels (px ):

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

Identique aux paramètres de remplissage, l'ordre de ces valeurs commence à partir de la marge supérieure (haut) et tourne dans le sens des aiguilles d'une montre autour de l'élément :

margin: top right bottom left

De plus, vous pouvez définissez également une valeur de pourcentage pour la marge :

p {margin : 10%;}

Le pourcentage est calculé par rapport à la largeur de l'élément parent. L'exemple ci-dessus définit les marges de l'élément p à 10 % de la largeur de son élément parent.

La valeur par défaut de la marge est 0, donc si aucune valeur n'est déclarée 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.

Par exemple, dans les navigateurs prenant en charge CSS, les marges produisent des « lignes vides » au-dessus et en dessous de chaque élément de paragraphe.

Par conséquent, si aucune marge n'est déclarée pour l'élément p, le navigateur peut en appliquer une tout seul. Bien entendu, tant que vous le déclarez spécifiquement, le style par défaut sera remplacé.

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!