Modèle de boîte : marge interne CSS

L'intérieur des éléments est entouré d'un marge. Le plus simple attribut pour contrôler cette zone est la propriété padding.

La propriété padding en CSS définit l'espace entre la bordure de l'élément et le contenu de l'élément. La propriété padding accepte des valeurs en longueur ou en pourcentage, mais ne permet pas l'utilisation de valeurs négatives.

Attribut padding CSS

La propriété padding en CSS définit l'espace entre l'élément et son contenu. La propriété padding accepte des valeurs en longueur ou en pourcentage, mais ne permet pas l'utilisation de valeurs négatives.

Par exemple, si vous souhaitez que tous les éléments h1 aient une marge interne de 10 pixels sur chaque côté, il suffit de le faire ainsi :

h1 {padding: 10px;}

Vous pouvez également définir les marges internes de chaque côté dans l'ordre supérieur, droit, inférieur et gauche, en utilisant des unités ou des pourcentages différents pour chaque côté :

h1 {padding: 10px 0.25em 2ex 20%;}

Propriétés de marge interne unilatérale

En utilisant également les quatre propriétés individuelles suivantes, définir respectivement les marges internes supérieure, droite, inférieure et gauche :

Vous avez peut-être pensé à cela, mais les règles suivantes ont le même effet que les règles abrégées précédentes :

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Valeurs en pourcentage des marges internes

Comme mentionné précédemment, vous pouvez définir des valeurs en pourcentage pour les marges internes des éléments. Les valeurs en pourcentage sont calculées par rapport à la largeur de l'élément parent, comme pour les marges extérieures. Par conséquent, si la largeur de l'élément parent change, elles changeront également.

La règle suivante définit la marge interne du paragraphe à 10% de la largeur de l'élément parent :

p {padding: 10%;}

Par exemple, si l'élément parent d'un paragraphe est un élément div, alors sa marge interne doit être calculée en fonction de la largeur du div.

<div style="width: 200px;">
<p>Ce paragraphe est contenu dans un DIV qui a une largeur de 200 pixels.</p>
</div>

Attention :Les marges internes supérieures et inférieures sont égales aux marges internes gauche et droite ; c'est-à-dire que les pourcentages des marges internes supérieures et inférieures sont définis par rapport à la largeur de l'élément parent, et non par rapport à la hauteur.

Exemple de marge interne en CSS :

Toutes les propriétés de marge interne dans une seule déclaration
Cet exemple montre comment utiliser les abréviations des propriétés pour définir toutes les propriétés de marge interne en une seule déclaration, qui peuvent inclure une à quatre valeurs.
Définir la marge interne inférieure 1
Cet exemple montre comment utiliser les valeurs en centimètres pour définir la marge interne inférieure des cellules.
Définir la marge interne inférieure 2
Cet exemple montre comment utiliser les pourcentages pour définir la marge interne inférieure des cellules.
Définir la marge interne gauche 1
Cet exemple montre comment utiliser les valeurs en centimètres pour définir la marge interne gauche des cellules.
Définir la marge interne gauche 2
Cet exemple montre comment utiliser les pourcentages pour définir la marge interne gauche des cellules.
Définir la marge interne droite 1
Cet exemple montre comment utiliser les valeurs en centimètres pour définir la marge interne droite des cellules.
Définir la marge interne droite 2
Cet exemple montre comment utiliser les pourcentages pour définir la marge interne droite des cellules.
Définir la marge interne supérieure 1
Cet exemple montre comment utiliser les valeurs en centimètres pour définir la marge interne supérieure des cellules.
Définir la marge interne supérieure 2
cet exemple, nous démontrons comment utiliser les pourcentages pour définir la marge interne supérieure des cellules.

Attribut de marge interne CSS

Attribut Description
padding Attribut de raccourci. Il permet de définir les propriétés de marge interne de l'élément dans une seule déclaration.
padding-bottom Définir la marge interne inférieure de l'élément.
padding-left Définir la marge interne gauche de l'élément.
padding-right Définir la marge interne droite de l'élément.
padding-top Définir la marge interne supérieure de l'élément.