Modèle de boîte : marge CSS

L'espace vide autour de la bordure de l'élément est appelé marge. Définir une marge crée un espace supplémentaire en dehors de l'élément.

La manière la plus simple de définir une marge est d'utiliser la propriété margin, cette propriété accepte toutes les unités de longueur, les pourcentages et même les valeurs négatives.

Attribut margin CSS

La manière la plus simple de définir une marge est d'utiliser Propriété margin.

La propriété margin accepte toutes les unités de longueur, telles que pixels, pouces, millimètres ou em.

La propriété margin peut être définie sur auto. La pratique la plus courante consiste à définir des valeurs de longueur pour les marges. La déclaration suivante applique un espace de 1/4 d'inch à chaque côté de l'élément h1 :

h1 {margin : 0.25in;}

L'exemple suivant définit des marges extérieures différentes pour les quatre côtés de l'élément h1, les unités de longueur utilisées sont les pixels (px) :

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

Comme pour la mise en page interne, l'ordre de ces valeurs commence par la marge externe haute (haut) et tourne autour de l'élément dans le sens horaire :

marge: haut droite bas gauche

De plus, vous pouvez également spécifier une valeur en pourcentage pour la marge :

p {marge : 10%;}

Les pourcentages sont calculés par rapport à la largeur de l'élément parent. Dans cet exemple, la marge de l'élément p est de 10% de la largeur de l'élément parent.

La valeur par défaut de marge est 0, donc si aucune valeur n'est déclarée pour marge, il n'y a pas de marge. Cependant, dans la pratique, les navigateurs fournissent déjà des styles prédéfinis pour de nombreux éléments, y compris les marges. Par exemple, dans les navigateurs prenant en charge CSS, des espaces vides sont générés au-dessus et au-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 appliquer une marge lui-même. Bien sûr, vous pouvez couvrir le style par défaut en le déclarant spécifiquement.

Copie de valeurs

Souvenez-vous ? Nous avons mentionné la copie de valeurs dans les deux premières sections. Nous vous expliquons maintenant comment utiliser la copie de valeurs.

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

p {marge: 0,5em 1em 0,5em 1em;}

Grâce à la copie de valeurs, vous n'avez pas besoin de taper ces deux nombres à répétition. Les règles suivantes sont équivalentes :

p {marge: 0,5em 1em;}

Ces deux valeurs peuvent remplacer les 4 valeurs précédentes. Comment font-ils cela ? CSS définit certaines 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 externe gauche manque, utilisez la valeur de la marge externe droite.
  • Si la valeur de la marge externe basse manque, utilisez la valeur de la marge externe haute.
  • Si la valeur de la marge externe droite manque, utilisez la valeur de la marge externe haute.

La figure suivante fournit une méthode plus intuitive pour comprendre cela :

Copie des valeurs CSS

Autrement dit, si 3 valeurs sont spécifiées pour les marges, la quatrième valeur (c'est-à-dire la marge externe gauche) est copiée à partir de la deuxième valeur (marge externe droite). Si deux valeurs sont données, la quatrième valeur est copiée à partir de la deuxième valeur, et la troisième valeur (marge externe basse) est copiée à partir de la première valeur (marge externe haute). Dans le dernier cas, si une seule valeur est donnée, les trois autres marges externes sont copiées à partir de cette valeur (marge externe haute).

En utilisant ce mécanisme simple, vous n'avez qu'à spécifier les valeurs nécessaires, sans avoir à appliquer les 4 valeurs, par exemple :

h1 {marge: 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 {margin: 1px;}			/* Équivalent à 1px 1px 1px 1px */

Cette méthode a un petit inconvénient, vous finirez certainement par rencontrer ce problème. Supposons que vous souhaitez définir la marge extérieure supérieure et gauche de l'élément p à 20 pixels, et la marge extérieure inférieure et droite à 30 pixels. Dans ce cas, vous devez écrire :

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

De cette manière, vous pouvez obtenir le résultat que vous souhaitez. Malheureusement, dans ce cas, il n'est pas possible de réduire le nombre de valeurs nécessaires.

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

p {margin: auto auto auto 20px;}

De la même manière, vous pouvez obtenir l'effet que vous souhaitez. Le problème est que saisir ces auto peut être ennuyeux. Si vous ne souhaitez contrôler que la marge unilatérale de l'élément, utilisez les propriétés de marge unilatérale.

Propriétés de marge unilatérale

Vous pouvez utiliser des propriétés de marge unilatérale pour définir la valeur de la marge unilatérale d'un élément. Supposons que vous souhaitez définir la marge extérieure gauche de l'élément p à 20px. Au lieu d'utiliser margin (qui nécessite beaucoup d'auto), vous pouvez utiliser la méthode suivante :

p {margin-left: 20px;}

Vous pouvez utiliser l'une des propriétés suivantes pour définir la marge extérieure correspondante sans直接影响其他所有外边距 :

Vous pouvez utiliser plusieurs de ces propriétés unilatérales dans une règle, par exemple :

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

Bien sûr, dans ce cas, utiliser margin peut être plus simple :

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

Que ce soit en utilisant une propriété unilatérale ou en utilisant margin, le résultat est le même. En règle générale, si vous souhaitez définir la marge pour plusieurs côtés, utiliser margin est plus simple. Cependant, du point de vue de l'affichage du document, en fait, il n'y a pas d'importance entre les deux méthodes, donc vous devriez choisir celle qui vous est la plus facile.

Avis et commentaires

Avis :Netscape et IE définissent la valeur par défaut de la marge (margin) pour le balise body à 8px. Opera ne fait pas de la même manière. Au contraire, Opera définit la valeur par défaut de l'espace de remplissage (padding) à 8px, donc si vous souhaitez ajuster les bords de l'ensemble du site et les afficher correctement dans Opera, vous devez personnaliser la marge de body.

Exemple de marge extérieure CSS :

Définir la marge extérieure gauche du texte
cet exemple montre comment configurer la marge gauche du texte.
Configurer la marge droite du texte
cet exemple montre comment configurer la marge droite du texte.
Configurer la marge supérieure du texte
cet exemple montre comment configurer la marge supérieure du texte.
Configurer la marge inférieure du texte
cet exemple montre comment configurer la marge inférieure du texte.
Toutes les propriétés de marge dans une déclaration.
cet exemple montre comment configurer toutes les propriétés de marge dans une déclaration.

Propriété de marge externe CSS

Propriété Description
margin Propriété abrégée. Définir toutes les propriétés de marge dans une déclaration.
margin-bottom Définir la marge externe inférieure de l'élément.
margin-left Définir la marge externe gauche de l'élément.
margin-right Définir la marge externe droite de l'élément.
margin-top Définir la marge supérieure externe de l'élément.