Marge interne CSS

La marge intérieure de cet élément est de 70px.

Marge interne CSS

CSS padding La propriété est utilisée pour générer de l'espace autour du contenu de l'élément à l'intérieur de toute bordure définie.

Avec CSS, vous pouvez contrôler complètement la marge intérieure (remplissage). Certaines propriétés peuvent définir la marge intérieure de chaque côté (haut, droite, bas et gauche) de l'élément.

Padding - Côté individuel

CSS possède des propriétés pour spécifier la marge intérieure de chaque côté d'un élément :

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Toutes les propriétés de marge intérieure peuvent être définies avec les valeurs suivantes :

  • length - Spécifiez la marge intérieure en px, pt, cm, etc.
  • % - Spécifiez la marge intérieure en pourcentage de la largeur de l'élément englobant
  • inherit - Spécifiez que la marge intérieure doit être héritée de l'élément parent

Astuce :Les valeurs négatives ne sont pas autorisées.

Exemple

Définir différentes marges intérieures pour les quatre côtés de l'élément <div> :

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Essayez-le vous-même

Padding - Propriété abrégée

Pour réduire le code, vous pouvez spécifier toutes les propriétés de marge intérieure dans une seule propriété.

padding La propriété est une abréviation des propriétés suivantes d'indentation interne :

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Le principe de fonctionnement est le suivant :

Si padding La propriété a quatre valeurs :

  • padding: 25px 50px 75px 100px;
    • La marge interne supérieure est de 25px
    • La marge interne droite est de 50px
    • La marge interne inférieure est de 75px
    • La marge interne gauche est de 100px

Exemple

Utilisez une propriété abrégée padding avec quatre valeurs définies :

div {
  padding: 25px 50px 75px 100px;
}

Essayez-le vous-même

Si padding La propriété a trois valeurs définies :

  • padding: 25px 50px 75px;
    • La marge interne supérieure est de 25px
    • La marge interne droite et gauche est de 50px
    • La marge interne inférieure est de 75px

Exemple

Utilisez une propriété abrégée padding avec trois valeurs définies :

div {
  padding: 25px 50px 75px;
}

Essayez-le vous-même

Si padding La propriété a deux valeurs définies :

  • padding: 25px 50px;
    • La marge interne supérieure et inférieure est de 25px
    • La marge interne droite et gauche est de 50px

Exemple

Utilisez une propriété abrégée padding avec deux valeurs définies :

div {
  padding: 25px 50px;
}

Essayez-le vous-même

Si padding La propriété a une valeur définie :

  • padding: 25px;
    • Toutes les quatre indentations internes sont de 25px

Exemple

Utilisez une propriété abrégée padding avec une valeur définie :

div {
  padding: 25px;
}

Essayez-le vous-même

Indentation interne et largeur de l'élément

CSS largeur La propriété spécifie la largeur de la zone de contenu de l'élément. La zone de contenu est la partie à l'intérieur de l'élément (modèle de boîte) comprising les marges, les bords et les indentations internes.

Par conséquent, si un élément possède une largeur spécifiée, l'ajout d'indentation intérieure à cet élément ajoutera à la largeur totale de l'élément. C'est généralement un résultat non souhaité.

Exemple

Ici, la largeur de l'élément <div> est de 300px. Cependant, la largeur réelle de l'élément <div> sera de 350px (300px + marge interne gauche 25px + marge interne droite 25px) :

div {
  width: 300px;
  padding: 25px;
}

Essayez-le vous-même

Pour maintenir la largeur à 300px, indépendamment de la marge intérieure, vous pouvez utiliser : box-sizing Propriété. Cela entraînera que l'élément conserve sa largeur. Si vous augmentez l'indentation intérieure, l'espace disponible pour le contenu diminue.

Exemple

Utilisez la propriété box-sizing pour maintenir la largeur à 300px, indépendamment de la marge intérieure :

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Essayez-le vous-même

Plus d'exemples

Définir l'indentation interne gauche
Cet exemple montre comment définir l'indentation interne gauche de l'élément <p>.
Définir l'indentation interne droite
Cet exemple montre comment définir l'indentation interne droite de l'élément <p>.
Définir l'indentation interne supérieure
Cet exemple montre comment définir l'indentation interne supérieure de l'élément <p>.
Définir l'indentation interne inférieure
Cet exemple montre comment définir l'indentation interne inférieure de l'élément <p>.

Toutes les propriétés d'indentation interne CSS

Propriété Description
padding Propriété abrégée utilisée pour définir toutes les propriétés d'indentation interne en une seule déclaration.
padding-bottom Définir l'indentation interne inférieure de l'élément.
padding-left Définir l'indentation 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.

Lecture complémentaire

Livre de complément :Modèle de boîte : marge interne CSS