Vraag Wanneer marge versus opvulling gebruiken in CSS


Wanneer u CSS schrijft, is er dan een bepaalde regel of richtlijn die moet worden gebruikt om te beslissen wanneer te gebruiken margin en wanneer te gebruiken padding?


1968
2018-02-03 03:20


oorsprong


antwoorden:


TL; DR:  Standaard gebruik ik overal marge, behalve wanneer ik een rand of achtergrond heb en de ruimte binnen dat zichtbare vak wil vergroten.

Voor mij is het grootste verschil tussen opvulling en marge dat verticaal automatisch samenvouwen marges en opvulling niet. Overweeg twee elementen boven elkaar, elk met opvulling van 1em. Deze opvulling wordt beschouwd als onderdeel van het element en wordt altijd bewaard. U eindigt dus met de inhoud van het eerste element, gevolgd door de opvulling van het eerste element, gevolgd door de opvulling van de tweede, gevolgd door de inhoud van het tweede element. Dus de inhoud van de twee elementen zal uiteindelijk 2em uit elkaar liggen.

Vervang nu die opvulling door 1emarge. Marges worden geacht buiten het element te liggen en de marges van aangrenzende items overlappen elkaar. Dus in dit voorbeeld kom je uit bij de inhoud van het eerste element gevolgd door 1em gecombineerde marge gevolgd door de inhoud van het tweede element. Dus de inhoud van de twee elementen is slechts 1em uit elkaar.

Dit kan erg handig zijn als je weet dat je 1em ruimte rond een element wilt zeggen, ongeacht het element waar het naast staat.

De andere twee grote verschillen is dat opvulling is opgenomen in het klikgebied en de achtergrondkleur / afbeelding, maar niet de marge.


1213
2018-02-07 20:59



Marge bevindt zich aan de buitenzijde van blokelementen terwijl de opvulling aan de binnenkant zit.

  • Gebruik marge om het blok te scheiden van dingen erbuiten
  • Gebruik opvulling om de inhoud weg van de randen van het blok te verplaatsen.

enter image description here


1336
2018-02-03 03:22



De beste die ik heb gezien, dit uitleggend met voorbeelden, diagrammen en zelfs een 'probeer het zelf'-beeld hier.

Het onderstaande diagram geeft volgens mij een direct visueel inzicht in het verschil.

enter image description here

Een ding om in gedachten te houden is dat de browsers voldoen aan de standaarden (IE-eigenaardigheden is een uitzondering) render alleen het inhoudsgedeelte op de opgegeven breedte, houd dit dus bij in de layoutberekeningen. Merk ook op dat border box enigszins a ziet comeback met Bootstrap 3 het ondersteunen.


524
2018-05-04 19:21



MARGE vs PADDING :

  1. Marge wordt gebruikt in een element om afstand tussen dat element en andere pagina-elementen te creëren. Waar opvulling wordt gebruikt om afstand tussen inhoud en rand van een element te creëren.

  2. Marge maakt geen deel uit van een element waar opvulling deel uitmaakt van element.

Raadpleeg de afbeelding hieronder uit de afbeelding Marge versus opvulling - CSS-eigenschappen

Margin vs Padding


76
2018-05-21 07:00



Er zijn meer technische verklaringen voor uw vraag, maar als u op zoek bent naar een manier om denk erover na marge en opvulling die u zullen helpen te kiezen wanneer en hoe ze te gebruiken, dit kan helpen.

Blokelementen vergelijken met afbeeldingen die aan een muur hangen:

  • De browservenster is net als de muur.
  • De inhoud is net als een foto.
  • De marge is net als de muurruimte tussen ingelijste foto's.
  • De vulling is net als het matwerk rond een foto.
  • De grens is net als de rand van een frame.

Bij het kiezen tussen marge en opvulling is het een goede vuistregel om te gebruiken marge wanneer u een element uit elkaar plaatst in relatie tot andere dingen aan de muur, en vulling wanneer u het uiterlijk van het element zelf aanpast. Marge zal de grootte van het element niet veranderen, maar opvulling zal het element typisch groter maken1.

1  Dit standaard boxmodel kan worden gewijzigd met de box-sizing attribuut.


72
2017-12-17 01:10



Hier is wat HTML die laat zien hoe padding en margin invloed op de klikbaarheid en vulling op de achtergrond. Een object ontvangt klikken naar zijn opvulling, maar klikken op een gebied met een marge van een object gaan naar het bovenliggende object.

$(".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



Het voordeel van marges is dat u zich geen zorgen hoeft te maken over de breedte van het element.

Zoals wanneer je iets geeft {padding: 10px;}, je moet de breedte van het element verkleinen met 20px om de 'passenen verstoor andere elementen eromheen niet.

Dus begin ik meestal met paddings om alles te krijgen 'packeden gebruik vervolgens marges voor kleine aanpassingen.

Een ander ding om op te letten is dat paddings consistenter zijn in verschillende browsers en IE behandelt negatieve marges niet erg goed.


30
2018-02-03 05:35



De marge wist een gebied rond een element (buiten de rand), maar de opvulling wist een gebied rond de inhoud (binnen de rand) van een element.

enter image description here

het betekent dat uw element niet bekend is met de externe marges, dus als u dynamische webbesturingselementen ontwikkelt, raad ik aan om padding vs margin te gebruiken als dat mogelijk is.

merk op dat je soms een marge moet gebruiken.


27
2017-08-01 11:28