Lors de l'utilisation de la marge vs rembourrage en CSS

Lors de l'écriture de CSS, est-il une règle ou une directive qui doit être utilisé au moment de décider quand utiliser margin et quand utiliser padding?

Utilisation padding sur <a> des balises lorsque vous souhaitez augmenter la focusable région.

InformationsquelleAutor Alex Angas | 2010-02-03

1422

TL;DR: Par défaut j'utilise la marge partout, sauf quand j'ai une frontière ou d'arrière-plan et que vous souhaitez augmenter l'espace à l'intérieur visible de la boîte.

Pour moi, la plus grande différence entre le rembourrage et la marge est verticale, les marges de l'auto-effondrement, et le rembourrage n'est pas.

Tenir compte de deux éléments l'un sur l'autre les uns avec rembourrage de 1em. Ce remplissage est considéré comme faisant partie de l'élément et est toujours conservé.

De sorte que vous finirez vers le haut avec le contenu de l'élément premier, suivi par le remplissage de l'élément premier, suivi par le rembourrage de la deuxième, suivi par le contenu du deuxième élément.

Donc le contenu de ces deux éléments sera à la fin 2em à part.

Maintenant remplacer le rembourrage avec cadratin (1 em marge. Les marges sont considérées comme en dehors de 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 suivie par 1em de la marge combinée suivie par le contenu du deuxième élément. De sorte que le contenu de ces deux éléments n'est 1em à part.

Cela peut être très utile lorsque vous savez que vous voulez dire 1em de l'espacement autour d'un élément, peu importe de quel élément il est à côté.

Les deux autres grandes différences sont que le rembourrage est inclus dans la cliquez sur la région et la couleur de fond/image, mais pas de la marge.
- +1 Quand le style de typographie et de abritary séquences des paragraphes, des titres et des listes c'est presque toujours mieux à l'espace les éléments avec des marges en raison de la proximité de la marge de l'effondrement de comportement.
- Pourquoi est-il que les marges de fermeture pendant l'horizontale, ce qui n'est pas? Qui pourrait induire en erreur beaucoup de gens
- Les parois verticales seulement l'effondrement pour les éléments de bloc. Pour les éléments de bloc, les marges sont ajoutées à la fois verticalement et horizontalement. Donc, je ne suis pas sûr que c'est une question que les marges horizontales de ne pas s'effondrer sur les éléments de bloc, car ils remplir leurs récipients de toute façon.
- "Pourquoi est-ce que les marges de fermeture pendant l'horizontale, ce qui n'est pas?" il n'y a pas de mécanisme pour avoir des éléments de bloc à côté les uns des autres sans l'aide de flotteurs - dont les marges sont jamais effondrement de toute façon (même à la verticale) ou de positionnement absolu, où il n'y a évidemment pas de s'effondrer, ou inline-block, qui utilise un modèle différent, où il est considéré comme en ligne et de contenu (espaces, texte) est importante, ou d'autres choses comme les tables, les flexbox, colonnes, où l'écart entre les colonnes a des comportements particuliers. Donc en bref il n'y a pas de place que la marge horizontale de s'effondrer pourrait être utilisé même si possible
- En outre, vous devriez prendre note que le rembourrage est inclus dans le montant total de la largeur/hauteur 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 100px mais la zone de contenu est de réduire de 20px, contrairement à box-sizing: content-box; où rembourrage est distinct dans le calcul du contenu de la largeur, ce qui rend votre largeur totale de 120px dans le contenu de la boîte;
InformationsquelleAutor pavon
1424

Marge est à l'extérieur des éléments de bloc, tandis que le rembourrage à l'intérieur.
- Utilisation de la marge de séparer le bloc de choses à l'extérieur, il
- Utilisation de rembourrage pour déplacer le contenu loin des bords du bloc.
- pourtant, la réponse correcte est par @pavon ci-dessous. les marges des éléments adjacents se chevauchent alors que le rembourrage ne se chevauchent pas. j'. e., la séparation totale est padding(A) + padding(B) + max(margin(A), margin(B))
- Voici une bonne pratique: utiliser solide bordure rouge pour vérifier le remplissage et de la marge. Parfois, on pourrait gâcher les choses comme <a>, qui contient du texte, entouré de rembourrage et de la marge. Utiliser cette astuce pour vérifier combien d'espace, nous pouvons cliquez sur.
InformationsquelleAutor John Boker
557

Le meilleur que j'ai vu d'expliquer cela avec des exemples, des schémas, et même un " essayez vous-même est d'avis ici.

Le diagramme ci-dessous donne je trouve un instant compréhension visuelle de la différence.

Une chose à garder à l'esprit est conforme aux standards des navigateurs (IE caprices est une exception) rendre uniquement le contenu de la portion de la largeur, afin de garder une trace de cela dans la présentation des calculs. Notez également que la zone de bordure, c'est de voir un peu de retour avec Bootstrap 3 de le soutenir.
- w3.org/TR/CSS2/box.html#box-dimensions et l'image de w3 w3.org/TR/CSS2/images/boxdim.png
InformationsquelleAutor Scott
84

Il y a plus d'explications techniques pour votre question, mais si vous êtes à la recherche d'un moyen de penser marge & padding pour vous aider à choisir quand et comment les utiliser, ce qui pourrait aider.

Comparer les éléments de bloc à des photos à accrocher sur un mur:
- La fenêtre du navigateur, c'est comme le mur.
- La contenu est comme une photographie.
- La marge, c'est comme le mur de l'espace entre les photos encadrées.
- La rembourrage est comme le tapis autour d'une photo.
- La frontière est comme la frontière, sur un cadre.
Moment de choisir entre la marge & padding, c'est une bonne règle de base à retenir pour utiliser marge lorsque vous êtes à l'espacement d'un élément en relation avec d'autres choses sur le mur, et rembourrage lorsque vous êtes réglage de l'apparence de l'élément lui-même. Marge ne va pas changer la taille de l'élément, mais rembourrage sera généralement faire le plus grand élément¹.

¹ Cette valeur par défaut du modèle de boîte peut être modifié avec les box-sizing l'attribut.
- En fait, je ne suis pas d'accord sur box-sizing: border-box faire "l'espace pour le contenu plus petits". Voici un violon avec 2 boîtes où, si j'ai gardé le rembourrage de la même et a ajouté: "Active", puis "Désactiver" sur le vol stationnaire, il n'a pas d'importance si j'ai utilisé box-sizing. Il serait encore élargir la zone. J'ai dû max le rembourrage de plus la zone de l'élargir à d', puis utiliser la méthode d'essai et d'erreur pour trouver une correspondance de combinaison pour les autres mots de passe dans la boîte qui devrait garder la même largeur pour chaque mot: jsfiddle.net/navyjax2/ngzqqjah
- Hey vapcguy, merci pour vos commentaires. Ma déclaration est généralement vrai, lorsque la largeur ou la hauteur est déclaré pour un élément, alors qu'un élément non déclarées dimensions n'est pas vraiment affecté par border-box (voir: jsfiddle.net/8yravLmL/1). Je vais faire ma réponse plus nuancée pour éviter toute confusion.
InformationsquelleAutor stvnrynlds
82

MARGE vs REMBOURRAGE :
1. Marge est utilisé dans un élément afin de créer de la distance entre cet élément et d'autres éléments de la page. Où rembourrage est utilisé pour créer une distance entre le contenu et la bordure d'un élément.
2. Marge n'est pas une partie de l'élément où le rembourrage est la partie de l'élément.
Veuillez consulter ci-dessous image extraite de la Marge Vs Rembourrage des Propriétés CSS
- Référencement de la frontière, plutôt que la vague de la Marge est à l'extérieur des éléments de bloc, tandis que le rembourrage à l'intérieur.' à l'extérieur/à l'intérieur de quoi? Et à l'extérieur/à l'intérieur suggère une position statique, non pas que cela affecte la taille de l'élément conteneur. Cette réponse a précisé pour moi.
InformationsquelleAutor Touhid Rahman

Voici le code HTML qui montre comment padding et margin affecter clickability, et le fond de remplissage. Un objet reçoit clics à son rembourrage, mais clique sur un des objets de la marge avais région vont à ses parents.

JS:

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

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

CSS:

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

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

HTML:

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

vous pouvez exécuter le même code sur jsfiddle: jsfiddle.net/fschwiet/y74Nz/3

InformationsquelleAutor Frank Schwieterman

31

La chose à propos de marges, c'est que vous n'avez pas besoin de s'inquiéter à propos 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 par 20px à garder le 'ajustement " et de ne pas déranger les autres éléments autour de lui.

J'ai donc généralement commencer en utilisant les rembourrages pour obtenir tout " packed " et ensuite utiliser des marges pour des modifications mineures.

Une autre chose à prendre en compte est que les rembourrages sont plus homogène sur les différents navigateurs IE et ne permet pas de traiter des marges négatives très bien.

InformationsquelleAutor pixeltocode
29

De 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
- Frontière - Une frontière qui va dans le rembourrage et le contenu
- Marge - Efface une zone à l'extérieur de la frontière. La marge est transparent
Exemple vivant (jouer en changeant les valeurs):
https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

InformationsquelleAutor Pulkit Anchalia
27

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

cela signifie que votre élément ne sais pas à propos de son à l'extérieur des marges, donc si vous êtes en développement web dynamique contrôles, je recommande d'utiliser un rembourrage vs marge, si vous le pouvez.

noter que certaines fois, vous avoir à utiliser la marge.

InformationsquelleAutor Mohammad Golahi
18

Une chose à noter est quand auto effondrement des marges de vous ennuyer (et vous n'êtes pas à l'aide de couleurs d'arrière-plan sur votre éléments), quelque chose, c'est juste plus facile à utiliser rembourrage.

InformationsquelleAutor alex
15

Il est bon de connaître les différences entre les margin et padding. Voici quelques différences:
- Marge est espace extra-atmosphérique d'un élément, tandis que le rembourrage est espace intérieur d'un élément.
- Marge est l'espace extérieur de la bordure d'un élément, tandis que le remplissage est l'espace à l'intérieur de la frontière de cela.
- Marge accepte la valeur de l'auto: margin: auto, mais vous ne pouvez pas définir de remplissage automatique.
- Marge peut être réglé à n'importe quel nombre, mais le remplissage doivent être non négatif.
- Quand vous le style d'un élément de rembourrage sera aussi affecté (par exemple la couleur de fond), mais pas de marge.
InformationsquelleAutor MAChitgarha
14

Avancée de la Marge contre Rembourrage Expliqué

Il est inapproprié d'utiliser padding à l'espace contenu dans un élément; vous doit utiliser margin sur le élément enfant à la place. Les anciens navigateurs tels que Internet Explorer mal interprété le modèle de boîte, sauf quand il est venu à l'aide de margin qui fonctionne parfaitement dans Internet Explorer 4.

Il y a deux exceptions lors de l'utilisation de padding est approprié d'utiliser:
1. Il est appliqué à un élément inline qui ne peut pas contiennent des éléments enfants comme un élément de saisie.
2. Vous êtes à la compensation pour une très divers navigateur bug qui un fournisseur *tousse* Mozilla *tousse* refuse de le réparer et sont certains (le degré que vous tenez à des échanges réguliers avec le W3C et le WHATWG éditeurs) que vous doit ont une solution et cette solution n'aura pas d'effet le style de rien d'autre que le bogue que vous compenser.
Quand vous avez 100% de la largeur de l'élément avec padding: 50px;, vous pouvez effectivement obtenir width: calc(100% + 100px);. Depuis margin est pas ajouté à la width il ne sera pas provoquer inattendu problèmes de mise en page lorsque vous utilisez margin sur child elements au lieu de padding directement sur l'élément.

Donc, si vous êtes pas procédant de l'une de ces deux choses ne pas ajouter le remplissage de l'élément, mais c'est direct de l'enfant/les enfants ou les élément(s) pour vous assurer que vous allez obtenir le devrait comportement dans tous navigateurs.
- Intéressant! Avez-vous un lien pour que le vendeur bug?
- Espérons que Wikipédia fonctionne pour vous? en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
InformationsquelleAutor John
14

Premièrement, regardons quelles sont les différences et ce que chacun la responsabilité de l'est:

1) Marge

Le CSS marge propriétés sont utilisées pour générer de l'espace autour des éléments.

La marge de définir les propriétés de la taille de l'espace blanc à l'extérieur de la
de la frontière. Avec CSS, vous avez le plein contrôle sur les marges.
Il y a
Propriétés CSS pour le réglage de la marge de chaque côté d'un élément
(haut, droite, bas et gauche).

2) Rembourrage

Le CSS padding propriétés sont utilisées pour générer de l'espace autour du contenu.

Le rembourrage efface une zone autour du contenu (à l'intérieur de la frontière) de
un élément.
Avec CSS, vous avez le plein contrôle sur le rembourrage. Il y
sont des propriétés CSS pour le réglage de la marge de chaque côté d'un élément
(haut, droite, bas et gauche).

Donc simplement Marges d'espace autour des éléments, tandis que Rembourrage sont l'espace autour de contenus qui font partie de l'élément.

Cette image de codemancers montre comment les marges et les frontières obtenir la collaboration et comment la zone de bordure et le contenu de la boîte de le rendre différent.

Aussi ils définissent chaque section comme ci-dessous:
- Contenu - ce qui définit la zone de contenu de la boîte où le contenu comme du texte, des images ou peut-être d'autres éléments de résidence.
- Rembourrage - cela efface le contenu de sa boîte contenant.
- Frontière - ce qui 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é à partir de quelque part d'autre. Inclus lien de "codemancers" n'a rien à voir avec la réponse.
- Alex, le pic et une partie de la réponse qui a mis en évidence sont de codemancers, assurez-vous sur les choses avant de vous laissez un commentaire et voter
InformationsquelleAutor Alireza
7

J'ai toujours utiliser ce principe:

C'est le modèle de boîte de les inspecter l'élément dans Firefox. Il fonctionne comme un oignon:
- Votre contenu est dans le milieu.
- Remplissage est l'espace entre votre contenu et le bord de l'étiquette, il est
  à l'intérieur.
- La frontière et de ses spécifications
- La marge est l'espace autour de la balise.
Donc de plus grandes marges de faire plus d'espace autour de la zone qui contient votre contenu.

Plus de rembourrage permettra d'augmenter l'espace entre votre contenu et de la zone dont il est à l'intérieur.

Aucun d'eux va augmenter ou diminuer la taille de la boîte si elle est définie sur une valeur spécifique.

InformationsquelleAutor Bjamse
6

Marge

Marge est généralement utilisé pour créer un espace entre l'élément lui-même et de son surround.

par exemple je l'utilise quand je suis en train de construire une barre de navigation pour en faire des bâtons sur les bords de l'écran et par aucun espace blanc.

Rembourrage

J'ai l'habitude de l'utiliser quand j'ai un élément à l'intérieur d'une frontière, <div> ou quelque chose de semblable, et je veux diminuer sa taille mais à l'époque, je veux garder la distance ou de la marge entre les autres éléments autour d'elle.

Très brièvement, c'est la situation; il dépend de ce que vous essayez de faire.

InformationsquelleAutor Mostafa Osama
1

Marge est en dehors de la boîte et le rembourrage est à l'intérieur de la boîte de
- Ceci ne répond pas à la question.
- il a demandé à propos de cette seule ???(lors de l'utilisation de la marge et quand utiliser un rembourrage?)
- Oui, c'est ce qu'il a demandé. Comment est-ce répondre lors de l'utilisation de chacun?
InformationsquelleAutor saurabhgoyal795

Vous devez vous connecter pour publier un commentaire.

Marge

Rembourrage