Question Quand utiliser la marge par rapport au remplissage en CSS


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


1968
2018-02-03 03:20


origine


Réponses:


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

Pour moi, la plus grande différence entre le rembourrage et la marge est que verticale les marges se réduisent automatiquement et le remplissage ne le fait pas. Considérons deux éléments l'un au-dessus de l'autre, chacun avec un remplissage de 1em. Ce remplissage est considéré comme faisant partie de l'élément et est toujours conservé. Ainsi, vous finirez avec le contenu du premier élément, suivi du remplissage du premier élément, suivi du remplissage de la seconde, suivi du contenu du second élément. Ainsi, le contenu des deux éléments finira par être séparés.

Maintenant, remplacez ce padding avec 1em marge. Les marges sont considérées comme étant en dehors de l'élément et les marges des éléments adjacents se chevauchent. Donc, dans cet exemple, vous obtiendrez le contenu du premier élément suivi de 1em de marge combinée suivi du contenu du second élément. Donc le contenu des deux éléments est seulement 1em à part.

Cela peut être très 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 région de clic et la couleur / image d'arrière-plan, mais pas la marge.


1213
2018-02-07 20:59



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

  • Utilisez la marge pour séparer le bloc des choses à l'extérieur
  • Utilisez un remplissage pour éloigner le contenu des bords du bloc.

enter image description here


1336
2018-02-03 03:22



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

Le diagramme ci-dessous, je pense, donne une compréhension visuelle instantanée de la différence.

enter image description here

Une chose à garder à l'esprit est les navigateurs conformes aux normes (IE quirks est une exception) restituez uniquement la partie de contenu à la largeur donnée, gardez donc une trace de ceci dans les calculs de disposition. Notez également que la boîte de bordure voit un peu d'un retour avec Bootstrap 3 le soutenir.


524
2018-05-04 19:21



MARGE contre 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ù padding 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.

S'il vous plaît se référer ci-dessous image extraite de Marge Vs Padding - Propriétés CSS

Margin vs Padding


76
2018-05-21 07:00



Il y a plus d'explications techniques pour votre question, mais si vous cherchez un moyen de Penser à marge et padding qui vous aidera à choisir quand et comment les utiliser, cela pourrait aider.

Comparez les éléments de bloc aux images accrochées au mur:

  • le fenêtre du navigateur est juste comme le mur.
  • le contenu est juste comme une photographie.
  • le marge est juste comme l'espace mural entre les images encadrées.
  • le rembourrage est juste comme le tapis autour d'une photo.
  • le frontière est juste comme la frontière sur un cadre.

En décidant entre la marge et le remplissage, c'est une bonne règle à utiliser marge quand vous espacer un élément par rapport à d'autres choses sur le mur, et 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 augmentera généralement l'élément1.

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


72
2017-12-17 01:10



Voici un peu de HTML qui montre comment padding et margin affecter la cliquabilité et le remplissage d'arrière-plan. Un objet reçoit des clics sur son remplissage, mais les clics sur une zone margin'd d'objets 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>


30
2018-02-09 05:29



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

Comme quand tu donnes quelque chose {padding: 10px;}, vous devrez réduire la largeur de l'élément en 20px garder le 'en formeet ne pas déranger les autres éléments qui l'entourent.

Donc, je commence généralement par utiliser des paddings pour tout avoir »packed'et ensuite utiliser les marges pour les réglages mineurs.

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


30
2018-02-03 05:35



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

enter image description here

cela signifie que votre élément ne connaît pas ses marges externes, donc si vous développez des contrôles web dynamiques, je vous recommande d'utiliser padding vs margin si vous le pouvez.

Notez que vous devez parfois utiliser la marge.


27
2017-08-01 11:28



Quand utiliser les marges et le rembourrage

CSS permet de créer de l'espace autour de vos éléments de deux manières: les marges et le remplissage. Dans la plupart des scénarios d'utilisation, ils sont fonctionnellement identiques mais en réalité, ils se comportent de manière légèrement différente. Il existe des différences importantes entre les marges et le remplissage que vous devez prendre en compte lorsque vous choisissez les éléments à utiliser pour déplacer les éléments autour de la page. Cependant, dans les cas où les marges ou le remplissage pourraient être utilisés pour le même effet, une grande partie de la décision se résume à des préférences personnelles.

Quand utiliser les marges

  1. Vous voulez que votre espacement apparaisse en dehors de la "boîte" créée par une propriété border. Les marges se trouvent à l'extérieur des frontières, donc vous les utiliseriez si vous voulez que votre frontière reste au même endroit. Cela peut être utile si vous avez, par exemple, une barre latérale avec une bordure que vous souhaitez éloigner de votre zone de contenu principale.

  2. Vous ne voulez pas que votre couleur ou image d'arrière-plan envahisse votre espace personnel. Les couleurs d'arrière-plan et les images s'arrêtent à la frontière, donc si vous préférez garder vos arrière-plans hors de l'espace que vous créez, les marges sont la propriété que vous voulez.

  3. Vous souhaitez un espace réductible en haut et en bas de votre élément. Les marges supérieure et inférieure se comportent différemment des marges latérales car si deux marges sont superposées, elles se réduisent à la taille du plus grand jeu de marges. Par exemple, si je mets un paragraphe avec une marge supérieure de 20 pixels et une marge inférieure de 15 pixels, je n'aurai que 20 pixels d'espace total entre les paragraphes (les deux marges s'affranchissent l'une de l'autre et la plus grande l'emporte) .

Quand utiliser le rembourrage

  1. Vous voulez que tout l'espace que vous créez soit à l'intérieur de votre frontière. Le remplissage est contenu à l'intérieur de vos frontières, il est donc utile d'éloigner vos frontières du contenu de votre élément.

  2. Vous avez besoin de votre couleur / image d'arrière-plan pour continuer dans l'espace que vous créez. Votre arrière-plan continuera derrière votre rembourrage, ne l'utilisez donc que si vous voulez que votre arrière-plan apparaisse.

  3. Vous voulez que votre espace supérieur et inférieur se comporte de manière plus rigide. Par exemple, si vous définissez les paragraphes dans votre document pour avoir un remplissage supérieur de 20 pixels et un remplissage inférieur de 15 pixels, alors chaque fois que vous avez deux paragraphes d'affilée, ils auront réellement un total de 35 pixels d'espace entre eux.


21
2017-09-09 20:00



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

Bordure - Une bordure qui entoure le remplissage et le contenu

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

Showing various parts

Voici l'exemple en direct: (jouer avec le changement des valeurs) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel


19
2017-11-03 11:43