Quand utiliser la marge vs le remplissage en CSS

Lors de l’écriture de CSS, existe-t-il une règle ou une directive particulière à utiliser pour décider quand utiliser la margin et quand utiliser le 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 dans 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 que le remplissage ne le fait pas. Considérons deux éléments l’un au-dessus de l’autre avec un remplissage de 1em. Ce remplissage est considéré comme faisant partie de l’élément et est toujours préservé. Vous allez donc vous retrouver avec le contenu du premier élément, suivi du remplissage du premier élément, suivi du remplissage du deuxième élément, suivi du contenu du deuxième élément. Ainsi, le contenu des deux éléments finira par être 2em séparés.

Remplacez maintenant ce remplissage par une marge de 1em. Les marges sont considérées comme extérieures à l’élément et les marges des éléments adjacents se chevauchent. Donc, dans cet exemple, vous allez vous retrouver avec le contenu du premier élément suivi de 1em de marge combinée suivi du contenu du deuxième élément. Donc, le contenu des deux éléments est à 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.

La marge est à l’extérieur des éléments de bloc lorsque le remplissage est à l’intérieur.

  • Utilisez la marge pour séparer le bloc des choses à l’extérieur
  • Utilisez le remplissage pour déplacer le contenu des bords du bloc.

entrer la description de l'image ici

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 .

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

entrer la description de l'image ici

Une chose à garder à l’esprit est que les navigateurs conformes aux normes (les quirks IE sont une exception ) ne rendent que la portion de contenu à la largeur donnée, donc gardez une trace de cela dans les calculs de disposition. Notez également que la boîte aux lettres fait un retour avec Bootstrap 3 qui la supporte.

MARGIN vs PADDING :

  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.

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

Marge vs Rembourrage

Il y a plus d’explications techniques pour votre question, mais si vous cherchez un moyen de réfléchir aux marges et au remplissage qui vous aideront à choisir quand et comment les utiliser, cela pourrait vous aider.

Comparer 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 photo.
  • La marge est 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 remplissage, vous pouvez utiliser la marge lorsque vous espacez un élément par rapport à d’autres éléments du mur et 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ément 1 .

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

Voici du HTML qui montre comment le padding et la margin affectent la cliquabilité et le remplissage en arrière-plan. Un object reçoit des clics sur son remplissage, mais les clics sur une zone marginale d’objects sont transmis à 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; } 
  

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

Comme quand vous donnez quelque chose {padding: 10px;} , vous devrez réduire la largeur de l’élément de 20px pour garder la forme et ne pas déranger les autres éléments qui l’entourent.

Donc, je commence généralement par utiliser des paddings pour que tout soit « packed », puis j’utilise les marges pour les réglages mineurs.

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

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.

entrer la description de l'image ici

cela signifie que votre élément ne connaît pas ses marges externes, donc si vous développez des contrôles Web dynamics, je vous recommande d’utiliser le remplissage ou la marge si vous le pouvez.

notez que parfois vous devez utiliser la marge.

Quand utiliser les marges et le rembourrage

CSS peut 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 y a des différences importantes entre les marges et le remplissage que vous devez prendre en compte lorsque vous choisissez de déplacer des éléments autour de la page. Cependant, dans les cas où les marges ou le rembourrage pourraient être utilisés dans le même sens, une grande partie de la décision revient à 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é de bordure. Les marges se situent en dehors des frontières, vous pouvez donc les utiliser si vous souhaitez que votre frontière rest 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 de fond envahisse votre espace personnel. Les couleurs et les images d’arrière-plan 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 souhaitez.

  3. Vous souhaitez un espace pliable en haut et en bas de votre élément. Les marges supérieure et inférieure se comportent différemment des marges latérales en ce sens que si deux marges se chevauchent, elles se réduisent à la taille de la plus grande marge définie. Par exemple, si je mets un paragraphe à une marge supérieure de 20 pixels et une marge inférieure à 15 pixels, je ne disposerai que de 20 pixels d’espace entre les paragraphes (les deux marges se chevauchent et la plus grande disparaît) .

Quand utiliser le rembourrage

  1. Vous voulez que tout l’espace que vous créez soit à l’intérieur de votre frontière. Le rembourrage est contenu dans vos bordures, il est donc utile de repousser vos bordures du contenu à l’intérieur 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 sur votre rembourrage, donc utilisez-le uniquement si vous voulez que votre arrière-plan soit visible.

  3. Vous voulez que vos espaces supérieur et inférieur se comportent de manière plus rigide. Par exemple, si vous définissez les paragraphes de votre document avec un remplissage supérieur de 20 pixels et un remplissage inférieur de 15 pixels, chaque fois que vous disposerez de deux paragraphes de suite, ils auront au total 35 pixels d’espace. entre eux.

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 contourne le remplissage et le contenu

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

Montrer différentes pièces

Voici l’exemple en direct: (modifiez les valeurs) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

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

Avancé Marge versus Rembourrage Expliqué

Il est inapproprié d’utiliser un padding pour espacer le contenu d’un élément. vous devez utiliser la margin sur l’ élément enfant à la place. Les navigateurs plus anciens tels qu’Internet Explorer ont mal interprété le modèle de boîte, sauf lorsqu’il s’agissait d’utiliser une margin qui fonctionne parfaitement dans Internet Explorer 4 .

Il y a deux exceptions lorsque l’utilisation du 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 bug de navigateur très divers qu’un vendeur * toux * Mozilla * cough * refuse de réparer et sont certains (dans la mesure où vous échangez régulièrement avec les éditeurs du W3C et de WHATWG) que vous devez avoir une solution opérationnelle et cette solution n’affectera pas le style de quelque chose que le bogue que vous compensez.

Lorsque vous avez un élément 100% width avec padding: 50px; vous obtenez effectivement width: calc(100% + 100px); . Étant donné que la margin n’est pas ajoutée à la width cela n’entraînera pas de problèmes de disposition inattendus lorsque vous utilisez la margin sur child elements au lieu de padding directement 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 directs enfants / enfants pour vous assurer que vous obtiendrez le comportement attendu dans tous les navigateurs.

Voyons d’abord quelles sont les différences et quelles sont les responsabilités:

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 le 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 (haut, droite, bas et gauche).

2) rembourrage

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 remplissage. Il existe des propriétés CSS pour définir le remplissage de chaque côté d’un élément (haut, droite, bas et gauche).

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

Marge et Rembourrage

Cette image provenant de codemancers montre comment les marges et les bordures s’allongent et comment les bordures et la boîte de contenu le rendent différent.

Ils définissent également chaque section comme ci-dessous:

  • Contenu – définit la zone de contenu de la boîte où se trouve le contenu réel tel que du texte, des images ou peut-être d’autres éléments.
  • Rembourrage – ceci efface le contenu principal de sa boîte contenant.
  • Border – cela englobe à la fois le contenu et le remplissage.
  • Marge – cette zone définit un espace transparent qui le sépare des autres éléments.

CSS Margin, padding et border sont des propriétés du modèle Box.

  • La marge est l’espace hors contenu.
  • Le rembourrage est l’espace à l’intérieur du contenu.
  • Bordure est un contour visible (toute couleur, style et largeur) en dehors du remplissage.

Largeur totale = content-width + padding + border.

Il est bon de connaître les différences entre la margin et le padding . Voici quelques différences:

  • La marge est l’ espace extérieur d’un élément, tandis que le rembourrage 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 rembourrage est l’espace à l’intérieur de la bordure.
  • Margin accepte la valeur de auto: margin: auto , mais vous ne pouvez pas définir Padding sur auto.
  • La marge peut être définie sur n’importe quel nombre, mais le remplissage doit être non négatif.
  • Lorsque vous stylez un élément, cela affecte également le remplissage (par exemple, la couleur de fond), mais pas la marge.

Marge

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

Par exemple, je l’utilise lorsque je construis une barre de navigation pour la faire adhérer aux bords de l’écran et pour ne laisser aucun espace blanc.

Rembourrage

J’utilise habituellement quand j’ai un élément à l’intérieur d’une bordure,

ou quelque chose de similaire, et je veux en diminuer la taille mais je veux conserver 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.

J’utilise toujours ce principe:

image du modèle de boîte

Ceci est le modèle de boîte de la fonctionnalité d’élément inspect dans Firefox. Cela fonctionne comme un oignon:

  • Votre contenu est au milieu.
  • Le remplissage est un espace entre votre contenu et le bord de l’étiquette à l’intérieur.
  • La frontière et ses spécifications
  • La marge est l’espace autour de l’étiquette.

Ainsi, des marges plus importantes créeront plus d’espace autour de la boîte contenant votre contenu.

Un remplissage plus important 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.

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