Quand utiliser margin vs padding en CSS [fermé]


2357

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?


Utilisez paddingsur les <a>balises lorsque vous souhaitez augmenter la zone de mise au point .
Josh Habdas

Réponses:


1586

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>


51
+1 Lors du style de la typographie et des séquences abritaires de paragraphes, de titres et de listes, il est presque toujours préférable d'espacer les éléments avec des marges en raison du comportement d'effondrement des marges adjacentes.
Pete B

17
Pourquoi les marges verticales s'effondrent-elles, contrairement aux marges horizontales? Cela pourrait dérouter beaucoup de monde
Marcos Pereira

16
Les marges verticales ne se réduisent que pour les éléments de bloc. Pour les éléments de bloc en ligne, les marges sont ajoutées verticalement et horizontalement. Je ne suis donc pas sûr que ce soit un problème que les marges horizontales ne s'effondrent pas sur les éléments de bloc car elles remplissent leur conteneur de toute façon.
Mike

2
"Pourquoi les marges verticales s'effondrent-elles alors que les marges horizontales ne le font pas?" il n'y a pas de mécanisme pour avoir des éléments de bloc côte à côte sans utiliser de flotteurs - dont les marges ne s'effondrent jamais de toute façon (même vertical) ou de positionnement absolu, où il n'y a évidemment pas d'effondrement, ou bloc en ligne, qui utilise un modèle différent où il est considéré en ligne et le contenu (espaces, texte) est important, ou d'autres choses comme les tableaux, flexbox, colonnes où l'écart entre les colonnes a un comportement spécial. Donc, en bref, il n'y a pas de place pour que l'effondrement de la marge horizontale puisse être utilisé même si possible
thomasrutter

5
Vous devez également noter que le rembourrage est inclus dans la largeur / hauteur totale de l'élément, lorsqu'il est utilisé avec, box-sizing: border-box;donc si vous avez width: 100px; padding-left: 20px;la largeur totale sera toujours de 100 pixels, mais la zone de contenu est réduite de 20 pixels, contrairement au box-sizing: content-box;rembourrage séparé dans le calcul de la largeur du contenu. ce qui fait votre largeur totale 120px dans la boîte de contenu;
Jomar Sevillejo

1494

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.

entrez la description de l'image ici


63
pourtant, la bonne réponse est par @pavon ci-dessous. les marges des éléments adjacents se chevauchent alors que le rembourrage ne se chevauche pas. c'est-à-dire que la séparation totale estpadding(A) + padding(B) + max(margin(A), margin(B))
nécromancien

9
Voici une bonne pratique: utilisez une bordure rouge unie pour vérifier le remplissage et la marge. Parfois, nous pourrions gâcher des choses comme <a>, qui contient du texte, entouré de rembourrage et de marge. Utilisez cette astuce pour vérifier la quantité d'espace sur laquelle nous pouvons cliquer.
p3nchan

589

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.

entrez la description de l'image ici

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.



91

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 1 .

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


En fait, je ne suis pas d'accord box-sizing: border-boxpour réduire "l'espace pour le contenu". Voici un violon avec 2 cases où, si je continuais de rembourrer le même et ajoutais "Actif", puis "Désactiver" en survol, cela n'avait pas d'importance si j'utilisais box-sizing. Cela élargirait encore la boîte. J'ai dû maximiser le rembourrage au maximum jusqu'à ce que la boîte se développe, puis utiliser des essais et des erreurs pour trouver une combinaison correspondante pour les autres mots entrant dans la boîte qui garderait la même largeur pour chaque mot: jsfiddle.net / navyjax2 / ngzqqjah
vapcguy

3
Hé vapcguy, merci pour votre contribution. Ma déclaration est généralement vraie, lorsque la largeur ou la hauteur est déclarée pour un élément, alors qu'un élément avec des dimensions non déclarées n'est pas vraiment affecté par border-box(voir: jsfiddle.net/8yravLmL/1 ). Je vais rendre ma réponse plus nuancée pour éviter toute confusion.
stvnrynlds

86

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

Margin vs Padding


Référencer la bordure, plutôt que la vague «Marge est à l'extérieur des éléments de bloc tandis que le rembourrage est à l'intérieur». à l'extérieur / à l'intérieur de quoi? Et l'extérieur / l'intérieur suggère une position statique, pas qu'elle affecte la taille de l'élément contenant. Cette réponse l'a clarifié pour moi.
nicodemus13

51

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

Illustration du modèle de boîte CSS

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


1
Merci. Une image vaut mieux que mille mots!
Catbuilts

33

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>


1
vous pouvez exécuter un code similaire sur jsfiddle: jsfiddle.net/fschwiet/y74Nz/3
Frank Schwieterman

31

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.


28

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.

entrez la description de l'image ici

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.


24

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.


18

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.


15

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.


Intéressant! Avez-vous un lien vers ce bogue du fournisseur?
Alex Angas

1
@AlexAngas Hope Wikipedia fonctionne pour vous? en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
John

14

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.

Marge et rembourrage

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.

Cette réponse semble avoir copié et collé ailleurs. Le lien inclus de "codemancers" n'a rien à voir avec la réponse.
Alex Angas

2
Alex, la photo et une partie de la réponse qui ont mis en évidence sont des codemancers, assurez-vous des choses avant de laisser un commentaire et de voter
Alireza

8

J'utilise toujours ce principe:

image de modèle de boîte

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.


6

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.


1

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


Cela ne répond pas à la question.
TylerH

@TylerH, il a demandé à ce sujet seulement ??? (quand utiliser la marge et quand utiliser le rembourrage?)
saurabhgoyal795

Oui, c'est ce qu'il a demandé. Comment cela répond-il quand les utiliser?
TylerH
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.