CSS / padding et margin : espacement, largeur et fusion des marges

En CSS, padding est l'espace entre le contenu et la bordure, tandis que margin est à l'extérieur de la bordure. Utilisez padding pour étendre l'intérieur d'un élément, y compris son arrière-plan, et la marge pour ajuster sa séparation des éléments environnants. La largeur résultante dépend de box-sizing, et les marges verticales éligibles peuvent fusionner au lieu de simplement s'additionner.

Différence entre padding et margin

La boîte d’un élément se compose de contenu, padding, bordure et marge, dans cet ordre de l’intérieur vers l’extérieur. Son arrière-plan s’étend normalement à travers le padding, tandis que la marge est transparente. Augmenter le padding d’un bouton élargit généralement son arrière-plan et sa zone cliquable ; ajouter une marge ne rend pas cet espace extérieur cliquable.

Les deux propriétés acceptent des valeurs telles que px, rem et %, mais padding: auto et le padding négatif sont invalides. Pour les propriétés d'espacement physique d'un mode d'écriture horizontal ordinaire, les valeurs en pourcentage se réfèrent à la largeur du bloc contenant, y compris les valeurs en haut et en bas. Elles ne représentent pas un pourcentage de sa hauteur. Définitions du modèle de boîte et de l'espacement W3C

Lire les valeurs de la notation raccourcie

Une notation abrégée à quatre valeurs commence par le haut et se poursuit dans le sens des aiguilles d'une montre : droite, bas, gauche. Deux valeurs signifient vertical et horizontal ; trois signifient haut, horizontal, bas. La même règle s'applique au padding et à la marge.

Pour un côté, utilisez une propriété telle que padding-top ou margin-left. Un raccourci padding ou margin ultérieur peut écraser les valeurs de côté déclarées précédemment, alors vérifiez l'ordre des règles.

Vérifier les largeurs avec un exemple complet

Enregistrez le code complet ci-dessous sous spacing.html en UTF-8 et ouvrez-le dans un navigateur. Aucune bibliothèque ni serveur n'est nécessaire. Alpha, Beta et les autres mots sont des étiquettes de comparaison. Après édition, enregistrez et rechargez. Sélectionnez chaque .box dans les outils de développement et inspectez son diagramme de box-model ou les styles calculés pour vérifier les largeurs et les espacements.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer padding et margin</title>
  <style>
    body { font-family: sans-serif; max-width: 640px; margin: 0 auto; padding: 16px; }
    h2 { font-size: 1.1rem; }
    .stage { padding: 12px; border: 1px dashed #777; overflow-x: auto; }
    .box { width: 200px; padding: 16px; border: 4px solid #17324d; margin: 24px; background: #dcefff; }
    .content-box { box-sizing: content-box; }
    .border-box { box-sizing: border-box; }
    .asymmetric { box-sizing: border-box; padding: 8px 16px 24px 32px; margin: 10px 20px 30px 40px; }
    .center { box-sizing: border-box; margin: 0 auto; }
    .collapse-demo { display: flow-root; border: 1px dashed #777; }
    .item { height: 30px; background: #dcefff; }
    .first { margin: 0 0 24px; }
    .second { margin: 16px 0 0; }
  </style>
</head>
<body>
  <h1>Comparer padding et margin</h1>
  <h2>content-box</h2>
  <div class="stage"><div class="box content-box">Alpha</div></div>
  <h2>border-box</h2>
  <div class="stage"><div class="box border-box">Beta</div></div>
  <h2>padding / margin</h2>
  <div class="stage"><div class="box asymmetric">Gamma</div></div>
  <h2>margin: 0 auto</h2>
  <div class="stage"><div class="box center">Delta</div></div>
  <h2>margin-bottom / margin-top</h2>
  <div class="collapse-demo">
    <div class="item first">A</div>
    <div class="item second">B</div>
  </div>
</body>
</html>

Alpha a une largeur de border-box de 200 + 16 × 2 + 4 × 2 = 240px. En incluant ses marges horizontales, il occupe 240 + 24 × 2 = 288px. Beta utilise le dimensionnement border-box, donc sa largeur de border-box est de 200px et sa largeur de contenu est de 200 - 16 × 2 - 4 × 2 = 160px. Ces calculs excluent le padding et la bordure de l'élément stage environnant.

Gamma a un padding de 8px en haut, 16px à droite, 24px en bas et 32px à gauche. Ses marges sont de 10px, 20px, 30px et 40px dans le même ordre. Comparez les différences visibles avec les directions abrégées ci-dessus.

Choisir le calcul des dimensions avec box-sizing

Avec content-box, la largeur spécifie la largeur du contenu, avec le padding et la bordure ajoutés à l'extérieur. Avec border-box, la largeur spécifiée inclut le contenu, le padding et la bordure. Aucun mode de dimensionnement n'inclut la marge dans la largeur. Les éléments div ordinaires utilisent initialement content-box, mais le CSS de réinitialisation d’un site peut modifier cela ; inspectez la valeur calculée.

Remplacez la règle .content-box de l’exemple par la suivante. La largeur de border-box d’Alpha passe de 240px à 200px. Conservez les autres valeurs inchangées, comparez, et restaurez content-box. Si le padding et la bordure ensemble dépassent la largeur spécifiée, la largeur du contenu ne peut pas devenir négative, donc la boîte résultante peut encore être plus large que prévu.

.content-box {
  box-sizing: border-box;
}

Explication de MDN sur box-sizing

Centrer un bloc avec des marges automatiques

Pour centrer horizontalement un bloc dans le flux normal, la boîte doit être plus étroite que la largeur disponible chez son parent et ses marges gauche et droite doivent être automatiques. Delta a une largeur de 200px et margin: 0 auto, donc l'espace horizontal restant est partagé entre les deux côtés. Le centrage seul ne peut pas résoudre le débordement lorsque le parent est trop étroit.

Si un bloc ordinaire avec une largeur automatique remplit déjà l'espace horizontal disponible, l'ajout de marges latérales automatiques ne produit aucun effet de centrage visible. Dans le flux normal, margin-top: auto et margin-bottom: auto ne le centrent pas verticalement. Les marges automatiques dans Flexbox ou Grid suivent des règles de mise en page différentes, donc distinguez ces contextes.

Comprendre la fusion des marges et les valeurs négatives

Les marges verticales adjacentes éligibles peuvent fusionner dans une disposition de bloc ordinaire. Dans le dernier exemple, la marge inférieure de 24px de A et la marge supérieure de 16px de B sont toutes deux positives, donc leur écart est la valeur la plus grande, 24px, plutôt que 40px. La bordure du parent empêche la fusion des marges entre ce parent et ses enfants dans cet exemple.

Modifiez la règle .collapse-demo de l'exemple comme ci-dessous. Ses enfants deviennent des éléments flex, dont les marges ne fusionnent pas les unes avec les autres, donc l'écart devient 24 + 16 = 40px. Comparez et restaurez display: flow-root. Appliquer flow-root à un parent seul n’élimine pas toute fusion des marges entre les blocs frères.

.collapse-demo {
  display: flex;
  flex-direction: column;
  border: 1px dashed #777;
}

Dans le mode d’écriture horizontal utilisé ici, les marges gauche et droite ne fusionnent pas de cette manière. Lorsque les marges qui fusionnent incluent des valeurs positives et négatives, ajoutez la plus grande valeur positive à la valeur négative ayant la plus grande valeur absolue : 24px et -8px produisent 16px. Si toutes sont négatives, utilisez la valeur la plus négative ; -8px et -16px produisent -16px. Une déclaration telle que margin-left: -8px est valide mais peut provoquer un chevauchement ou déplacer le contenu en dehors de son parent. Vérifiez les écrans étroits et les indicateurs de focus du clavier. Un padding négatif ne peut pas produire le même effet. Règles W3C sur la fusion des marges

Vérifier un espacement inattendu

1. Vérifiez les paramètres par défaut du navigateur. La marge par défaut de l’élément body ou les marges verticales par défaut des p et h1 peuvent donner l'impression que l'espacement est plus important que vos déclarations. Réinitialisez les éléments concernés plutôt que de supprimer aveuglément tout l'espacement.
2. Pour un élément en ligne ordinaire non remplacé comme span, les marges verticales n'affectent pas la disposition des lignes. Le padding en ligne peut être affiché sans pousser les lignes adjacentes comme prévu. Envisagez inline-block ou un autre mode de mise en page lorsque la boîte a besoin d'une taille et d'un espacement indépendants.
3. Utilisez les outils de développement pour vérifier que le sélecteur correspond, que la déclaration est valide et qu'une règle de priorité plus élevée ou un raccourci ultérieur ne l'a pas annulée. Comparez également à une largeur étroite, en vérifiant le débordement et l'effet du padding sur la largeur.

Pour définir l'espacement par rapport à la direction de l'écriture, utilisez des propriétés logiques telles que padding-inline et margin-block. Dans l'écriture horizontale ordinaire, l'axe en ligne est horizontal et l'axe en bloc est vertical. Ces axes changent dans l'écriture verticale, donc ils ne correspondent pas toujours aux côtés physiques gauche et droit.