Quand utiliser margin et padding en CSS

Question

Lors de l'écriture de CSS, existe-t-il une règle ou une ligne directrice particulière qui devrait être utilisée pour décider quand utiliser margin et quand utiliser padding ?

Answer 1

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

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

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

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

Ainsi, le contenu des deux éléments se résume à 2em à part.

Remplacez maintenant ce padding par 1em margin. Les marges sont considérées comme étant à l'extérieur de l'élément, et les marges des éléments adjacents se chevaucheront.

Ainsi, dans cet exemple, vous vous retrouverez avec le contenu du premier élément suivi de 1em de la marge combinée suivie du contenu du deuxième élément. Ainsi, le contenu des deux éléments est seulement 1em à part.

Cela peut être vraiment utile lorsque vous savez que vous voulez dire 1em d'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 remplissage 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>

Answer 2

La marge se trouve à l'extérieur des éléments du bloc, tandis que le rembourrage se trouve à l'intérieur.

• Utilisez la marge pour séparer le bloc des éléments extérieurs.
• Utilisez le remplissage pour éloigner le contenu des bords du bloc.

Answer 3

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

Je pense que le diagramme ci-dessous permet de comprendre instantanément la différence.

Il faut garder à l'esprit que les navigateurs conformes aux normes ( Les bizarreries d'IE sont une exception ) ne rendent que la partie contenu à la largeur donnée, il faut donc en tenir compte dans les calculs de mise en page. Notez également que la boîte de bordure voit un peu de Retour avec Bootstrap 3 qui le soutiennent.

Answer 4

Il existe des explications plus techniques à votre question, mais si vous voulez un moyen de réfléchir margin et padding, cette analogie peut vous aider.

Imaginez les éléments du bloc comme des cadres de photos accrochés à un mur :

• La photo est le contenu .
• La natte est le rembourrage .
• La moulure du cadre est le frontière .
• Le mur est le fenêtre d'observation .
• L'espace entre deux cadres est le marge .

En gardant cela à l'esprit, une bonne règle de base est d'utiliser marge lorsque vous voulez espacer un élément par rapport aux autres éléments du mur, et rembourrage lorsque vous ajustez l'apparence de l'élément lui-même. La marge ne modifie pas la taille de l'élément, mais le remplissage l'agrandit. 1 .

---

1 Vous pouvez modifier ce comportement avec l'option box-sizing attribut .

Answer 5

Voici un excellent article publié récemment sur le site de Smashing Magazine, qui donne la meilleure description que j'ai vue (avec de belles photos) :

Marge et remplissage