Quand utiliser margin vs padding en CSS [fermé]

Lors de l'écriture de CSS, existe-t-il une règle ou une directive particulière à utiliser pour décider quand utiliser marginet quand l'utiliser padding?

TL; DR: Par défaut, j'utilise la marge partout, sauf lorsque j'ai une bordure ou un arrière-plan et que je souhaite augmenter l'espace à l'intérieur de cette zone visible.

Pour moi, la plus grande différence entre le remplissage et la marge est que les marges verticales se réduisent automatiquement, et le remplissage ne le fait pas.

Considérez deux éléments l'un au-dessus de l'autre avec un rembourrage de 1em. Ce remplissage est considéré comme faisant partie de l'élément et est toujours conservé.

Vous vous retrouverez donc avec le contenu du premier élément, suivi du remplissage du premier élément, suivi du remplissage du second, suivi du contenu du deuxième élément.

Ainsi, le contenu des deux éléments finira par être 2emdifférent.

Remplacez maintenant ce rembourrage par 1em de marge. Les marges sont considérées comme étant en dehors de l'élément et les marges des éléments adjacents se chevauchent.

Ainsi, dans cet exemple, vous vous retrouverez avec le contenu du premier élément suivi 1emde la marge combinée suivie du contenu du deuxième élément. Le contenu des deux éléments n'est donc que 1emséparé.

Cela peut être très utile lorsque vous savez que vous voulez dire 1emde l'espacement autour d'un élément, quel que soit l'élément à côté duquel il se trouve.

Les deux autres grandes différences sont que le rembourrage est inclus dans la zone de clic et la couleur / image d'arrière-plan, mais pas la marge.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

La marge est à l'extérieur des éléments de bloc tandis que le rembourrage est à l'intérieur.

• Utilisez une marge pour séparer le bloc des éléments extérieurs
• Utilisez un rembourrage pour éloigner le contenu des bords du bloc.

Le meilleur que j'ai vu expliquer cela avec des exemples, des diagrammes et même une vue `` essayez-le vous-même '' est ici .

Je pense que le diagramme ci-dessous donne une compréhension visuelle instantanée de la différence.

Une chose à garder à l'esprit est que les navigateurs conformes aux normes (les bizarreries IE sont une exception ) ne rendent que la partie du contenu à la largeur donnée, alors gardez-en une trace dans les calculs de mise en page. Notez également que la boîte de bordure voit un peu un retour avec Bootstrap 3 la prenant en charge.

Il existe des explications plus techniques à votre question, mais si vous cherchez un moyen de penser à la marge et au rembourrage qui vous aideront à choisir quand et comment les utiliser, cela pourrait vous aider.

Comparez des éléments de bloc à des images accrochées à un mur:

• La fenêtre du navigateur est comme le mur.
• Le contenu est comme une photographie.
• La marge est exactement comme l'espace mural entre les images encadrées.
• Le rembourrage est comme le tapis autour d'une photo.
• La bordure est comme la bordure d'un cadre.

Lorsque vous décidez entre marge et rembourrage, c'est une bonne règle de base que d'utiliser la marge lorsque vous espérez un élément par rapport à d'autres choses sur le mur, et le rembourrage lorsque vous ajustez l'apparence de l'élément lui-même. La marge ne changera pas la taille de l'élément, mais le remplissage rend généralement l'élément plus grand ¹ .

¹ Ce modèle de boîte par défaut peut être modifié avec l' box-sizingattribut .

MARGE vs REMBOURRAGE :

1. La marge est utilisée dans un élément pour créer une distance entre cet élément et d'autres éléments de la page. Où le remplissage est utilisé pour créer une distance entre le contenu et la bordure d'un élément.

2. La marge ne fait pas partie d'un élément où le remplissage fait partie de l'élément.

Veuillez vous référer à l'image ci-dessous extraite de Margin Vs Padding - Propriétés CSS

Depuis https://www.w3schools.com/css/css_boxmodel.asp

Explication des différentes parties:

• Contenu - Le contenu de la boîte, où le texte et les images apparaissent

• Rembourrage - Efface une zone autour du contenu. Le rembourrage est transparent

• Border - Une bordure qui fait le tour du rembourrage et du contenu

• Marge - Efface une zone en dehors de la frontière. La marge est transparente

Exemple en direct (jouez en modifiant les valeurs): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Voici quelques HTML qui montre comment paddinget marginaffecter cliquabilité, et le remplissage arrière - plan. Un objet reçoit des clics sur son remplissage, mais les clics sur une zone marginée d'un objet vont à son parent.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

La chose à propos des marges est que vous n'avez pas à vous soucier de la largeur de l'élément.

Comme lorsque vous donnez quelque chose {padding: 10px;}, vous devrez réduire la largeur de l'élément de 20 pixels pour garder la forme et ne pas déranger les autres éléments autour de lui.

Je commence donc généralement par utiliser des rembourrages pour tout obtenir ' packed', puis j'utilise des marges pour des ajustements mineurs.

Une autre chose à savoir est que les rembourrages sont plus cohérents sur différents navigateurs et IE ne traite pas très bien les marges négatives.

La marge efface une zone autour d'un élément (à l'extérieur de la bordure), mais le remplissage efface une zone autour du contenu (à l'intérieur de la bordure) d'un élément.

cela signifie que votre élément ne connaît pas ses marges extérieures, donc si vous développez des contrôles Web dynamiques, je vous recommande d'utiliser le remplissage par rapport à la marge si vous le pouvez.

notez que vous devez parfois utiliser la marge.

Il est bon de connaître les différences entre marginet padding. Voici quelques différences:

• La marge est l' espace extérieur d'un élément, tandis que le remplissage est l'espace intérieur d'un élément.

• La marge est l'espace à l'extérieur de la bordure d'un élément, tandis que le remplissage est l'espace à l'intérieur de la bordure de celui-ci.

• La marge accepte la valeur de auto:, margin: automais vous ne pouvez pas définir le remplissage sur auto.

• La marge peut être définie sur n'importe quel nombre, mais le remplissage doit être non négatif.

• Lorsque vous stylisez un élément, le remplissage sera également affecté (par exemple la couleur d'arrière-plan), mais pas la marge.

Une chose à noter est que lorsque les marges de repli automatique vous ennuient (et que vous n'utilisez pas de couleurs d'arrière-plan sur vos éléments), il est simplement plus facile d'utiliser le remplissage.

Explication de la marge avancée et du rembourrage

Il est inapproprié d'utiliser paddingpour espacer le contenu d'un élément; vous devez plutôt utiliser marginl' élément enfant . Les navigateurs plus anciens tels qu'Internet Explorer ont mal interprété le modèle de boîte, sauf en ce qui concerne l'utilisation marginqui fonctionne parfaitement dans Internet Explorer 4 .

Il existe deux exceptions lorsque l'utilisation padding est appropriée:

1. Il est appliqué à un élément en ligne qui ne peut contenir aucun élément enfant tel qu'un élément d'entrée.

2. Vous compensez un bogue de navigateur très divers qu'un vendeur * tousse * Mozilla * tousse * refuse de corriger et êtes certain (dans la mesure où vous avez des échanges réguliers avec les éditeurs W3C et WHATWG) que vous devez avoir une solution de travail et cette solution n'affectera pas le style d'autre chose que le bug que vous compensez.

Lorsque vous avez un élément de 100% de largeur, padding: 50px;vous obtenez effectivement width: calc(100% + 100px);. Étant donné que marginn'est pas ajouté à, widthil ne causera pas de problèmes de mise en page inattendus lorsque vous utilisez marginsur child elementsau lieu de paddingdirectement sur l'élément.

Donc, si vous ne faites pas l' une de ces deux choses, n'ajoutez pas de remplissage à l'élément mais à ses éléments enfants / enfants directs pour vous assurer d'obtenir le comportement attendu dans tous les navigateurs.

Voyons d'abord quelles sont les différences et quelle est chaque responsabilité:

1) Marge

Les propriétés de marge CSS sont utilisées pour générer de l'espace autour des éléments.
Les propriétés de marge définissent la taille de l'espace blanc à l'extérieur de la bordure. Avec CSS, vous avez un contrôle total sur les marges.
Il existe des propriétés CSS pour définir la marge de chaque côté d'un élément (en haut, à droite, en bas et à gauche).

2) Remplissage

Les propriétés de remplissage CSS sont utilisées pour générer de l'espace autour du contenu.
Le remplissage efface une zone autour du contenu (à l'intérieur de la bordure) d'un élément.
Avec CSS, vous avez un contrôle total sur le rembourrage. Il existe des propriétés CSS pour définir le remplissage de chaque côté d'un élément (en haut, à droite, en bas et à gauche).

Ainsi, les marges sont simplement un espace autour des éléments, tandis que le remplissage est un espace autour du contenu qui fait partie de l'élément.

Cette image de codemancers montre comment la marge et les bordures s'unissent et comment la boîte de bordure et la boîte de contenu la rendent différente.

Ils définissent également chaque section comme suit:

• Contenu - cela définit la zone de contenu de la boîte où réside le contenu réel comme le texte, les images ou peut-être d'autres éléments.
• Remplissage - cela efface le contenu principal de sa boîte contenant.
  
• Bordure - cela entoure à la fois le contenu et le remplissage.
• Marge - cette zone définit un espace transparent qui le sépare des autres éléments.

J'utilise toujours ce principe:

Il s'agit du modèle de boîte de la fonction d'inspection des éléments dans Firefox. Cela fonctionne comme un oignon:

• Votre contenu est au milieu.
• Le remplissage est un espace entre votre contenu et le bord de la balise dans laquelle il se trouve.
• La frontière et ses spécifications
• La marge est l'espace autour de la balise.

Des marges plus importantes feront donc plus d'espace autour de la boîte contenant votre contenu.

Un rembourrage plus grand augmentera l'espace entre votre contenu et la boîte dans laquelle il se trouve.

Aucun d'eux n'augmentera ou ne diminuera la taille de la boîte si elle est définie sur une valeur spécifique.

Marge

La marge est généralement utilisée pour créer un espace entre l'élément lui-même et son environnement.

par exemple, je l'utilise lorsque je construis une barre de navigation pour la faire coller aux bords de l'écran et sans espace blanc.

Rembourrage

J'utilise habituellement quand j'ai un élément à l'intérieur d'une bordure, <div> ou quelque chose de similaire, et je veux diminuer sa taille mais au moment où je veux garder la distance ou la marge entre les autres éléments qui l'entourent.

Donc, brièvement, c'est situationnel; cela dépend de ce que vous essayez de faire.

La marge est en dehors de la boîte et le rembourrage est à l'intérieur de la boîte