Explication détaillée de l'utilisation de l'attribut CSS margin

Le moyen le plus simple de définir les marges est d'utiliser l'attribut margin.

L'attribut 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 une marge de 1/4 de pouce sur tous les côtés de l'élément h1 :

h1 {margin : 0.25in;>

L'exemple suivant définit les quatre côtés de l'élément h1 Différent les marges sont définies respectivement et l'unité de longueur utilisée est le pixel (px) :

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

sont les mêmes que les paramètres de marge intérieure. des valeurs commence à partir de la marge supérieure (en haut) et tourne dans le sens des aiguilles d'une montre autour de l'élément :

marge : en haut à droite en bas à gauche

De plus, vous pouvez également définir une valeur en 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 créent 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 lui-même. Bien entendu, tant que vous le déclarez spécifiquement, le style par défaut sera remplacé.

Copier la valeur

Vous vous souvenez ? Nous avons mentionné la copie de valeur dans les deux sections précédentes. Ci-dessous, nous vous expliquons comment utiliser la copie de valeur.

Parfois, nous saisissons des valeurs répétées :

p {margin : 0.5em 1em 0.5em 1em;>

Avec la copie de valeur, vous n'avez pas besoin de la saisir à plusieurs reprises Cette paire de chiffres. La règle ci-dessus est équivalente à la règle suivante :

p {margin: 0.5em 1em;>

Ces deux valeurs peuvent remplacer les 4 valeurs précédentes. Comment cela se fait-il ? CSS définit des règles qui permettent de spécifier moins de 4 valeurs pour les marges. Les règles sont les suivantes :

Si la valeur de la marge gauche est manquante, la valeur de la marge droite est utilisée.

Si la valeur de la marge inférieure est manquante, la valeur de la marge supérieure est utilisée.

Si la valeur de la marge droite est manquante, la valeur de la marge supérieure est utilisée.

L'image suivante fournit une manière plus intuitive de comprendre cela :

En d'autres termes, si 3 valeurs sont spécifiées pour la marge, la 4ème valeur (c'est-à-dire la marge de gauche) sera copiée de la 2ème valeur (marge droite). Si deux valeurs sont données, la 4ème valeur sera copiée à partir de la 2ème valeur, et la 3ème valeur (marge inférieure) sera copiée à partir de la 1ère valeur (marge supérieure). Dans ce dernier cas, si une seule valeur est donnée, alors les trois autres marges sont copiées à partir de cette valeur (marge supérieure).

Grâce à ce mécanisme simple, il vous suffit de spécifier les valeurs nécessaires sans avoir à appliquer les 4 valeurs, par exemple :

h1 {margin: 0.25em 1em 0.5em;} / * Équivalent à 0,25em 1em 0,5em 1em */h2 {marge : 0,5em 1em;} /* Équivalent à 0,5em 1em 0,5em 1em */p {marge : 1px;} /* Équivalent à 1px 1px 1px 1px * /

Il y a un petit inconvénient à cette approche, vous finirez certainement par rencontrer ce problème. Supposons que vous souhaitiez définir les marges supérieure et gauche de l'élément p sur 20 pixels et les marges inférieure et droite sur 30 pixels. Dans ce cas, vous devez écrire :

p {margin: 20px 30px 30px 20px;}

pour obtenir le résultat souhaité. Malheureusement, dans ce cas, le nombre de valeurs requises ne peut pas être réduit.

Regardons un autre exemple. Si vous souhaitez que toutes les marges sauf la marge de gauche soient automatiques (la marge de gauche est de 20 px) :

p {margin: auto auto auto 20px;>

De même, vous pouvez obtenir l'effet que vous vouloir. Le problème est que taper ces autos est un peu fastidieux. Si vous souhaitez contrôler uniquement les marges d'un côté d'un élément, utilisez la propriété single-margin.

Propriété de marge unilatérale

Vous pouvez utiliser la propriété de marge unilatérale pour définir une valeur pour la marge sur un côté d'un élément. Supposons que vous souhaitiez définir la marge gauche de l'élément p sur 20 px. Au lieu d'utiliser margin (ce qui nécessite de taper beaucoup de auto), vous pouvez faire ceci :

p {margin-left: 20px;}

Vous pouvez utiliser l'une des propriétés suivantes pour définir uniquement la marge supérieure supérieure correspondante sans affecter directement toutes les autres marges :

margin-top

margin-right

margin-bottom

margin-left

Plusieurs de ces attributs unilatéraux peuvent être utilisés dans une seule règle, par exemple :

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

Bien sûr, dans ce cas, il pourrait être plus simple d'utiliser margin:

p {margin: 20px 30px 30px 20px;>

Que vous utilisiez des attributs simple face ou une marge, le résultat est le même. De manière générale, si vous souhaitez définir des marges pour plusieurs côtés, il est plus facile d'utiliser la marge. Cependant, du point de vue de la documentation, la méthode que vous utilisez n'a pas d'importance, vous devez donc choisir celle qui vous convient le mieux.

Conseils et notes

Astuce : La valeur de marge par défaut définie par Netscape et IE pour la balise body est de 8 px. Ce n’est pas le cas avec Opera. En revanche, Opera définit la valeur par défaut du remplissage interne comme 8px, donc si vous souhaitez ajuster les bords de l'ensemble du site Web et l'afficher correctement dans Opera, vous devez personnaliser le remplissage du corps.

Exemple de marge CSS :

<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="leftmargin">这个段落带有指定的左外边距。</p>
</body>
</html>

Définissez la marge droite du texte :

<html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="rightmargin">这个段落带有指定的右外边距。这个段落带有指定的右外边距。这个段落带有指定的右外边距。</p>
</body>
</html>

Définissez la marge supérieure du texte :

<html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>

Définissez la marge inférieure du texte :

<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="bottommargin">这个段落带有指定的下外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>

Toutes les propriétés de marge dans une seule déclaration :

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>

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!