Wanneer marge versus opvulling gebruiken in CSS

$(".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="https://code.jquery.com/jquery-latest.js"></script>
<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">
  </div>
</div>

Antwoord 8, autoriteit 2%

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

Als je iets {padding: 10px;}geeft, moet je de breedte van het element met 20pxverkleinen om de ‘fit ‘ en de andere elementen eromheen niet storen.

Dus ik begin over het algemeen met het gebruik van opvullingen om alles ‘packed‘ te krijgen en gebruik dan marges voor kleine aanpassingen.

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

Antwoord 9, autoriteit 2%

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.

het betekent dat uw element niets weet van zijn buitenmarges, dus als u dynamische webbesturingselementen ontwikkelt, raad ik u aan om opvulling versus marge te gebruiken als dat mogelijk is.

merk op dat u soms marge moet gebruiken.

Antwoord 10

Eén ding om op te merken is dat wanneer automatisch samenvouwende marges u irriteren (en u geen achtergrondkleuren voor uw elementen gebruikt), iets dat gewoon gemakkelijker is om opvulling te gebruiken.

Antwoord 11

Laten we eerst eens kijken wat de verschillen zijn en wat elke verantwoordelijkheid is:

1) Marge

De CSS-marge-eigenschappen worden gebruikt om ruimte rond elementen te genereren.

De marge-eigenschappen bepalen de grootte van de witruimte buiten de
grens. Met CSS heb je volledige controle over de marges.
Er zijn
CSS-eigenschappen voor het instellen van de marge voor elke zijde van een element
(boven, rechts, onder en links).

2) Vulling

De CSS-opvuleigenschappen worden gebruikt om ruimte rond inhoud te genereren.

De opvulling maakt een gebied vrij rond de inhoud (binnen de rand) van
een element.
Met CSS heb je volledige controle over de opvulling. Daar
zijn CSS-eigenschappen voor het instellen van de opvulling voor elke zijde van een element
(boven, rechts, onder en links).

Dus gewoon Margeszijn ruimte rond elementen, terwijl Opvullingruimte zijn rond inhoud die deel uitmaakt van het element.

Deze afbeelding van codemancerslaat zien hoe marge en randen samenkomen en hoe border box en content-box het maken anders.

Ze definiëren ook elke sectie zoals hieronder:

• Inhoud– dit definieert het inhoudsgebied van het vak waar de daadwerkelijke inhoud, zoals tekst, afbeeldingen of misschien andere elementen, zich bevindt.
• Opvulling– hiermee wordt de hoofdinhoud uit de doos verwijderd.
• Rand– deze omringt zowel de inhoud als de opvulling.
• Marge– dit gebied definieert een transparante ruimte die het scheidt van andere elementen.

Antwoord 12

Ik gebruik altijd dit principe:

Dit is het doosmodel van de functie voor het inspecteren van elementen in Firefox. Het werkt als een ui:

• Je inhoud staat in het midden.
• Opvulling is ruimte tussen uw inhoud en de rand van de tag die het is
  binnen.
• De rand en zijn specificaties
• De marge is de ruimte rond de tag.

Dus grotere marges maken meer ruimte vrij rond het vak dat uw inhoud bevat.

Grotere opvulling vergroot de ruimte tussen uw inhoud en de doos waarin deze zich bevindt.

Geen van beide zal de grootte van het vak vergroten of verkleinen als het is ingesteld op een specifieke waarde.

Antwoord 13

Marge

Marge wordt meestal gebruikt om een ruimte te creëren tussen het element zelf en de rand.

Ik gebruik het bijvoorbeeld wanneer ik een navigatiebalk aan het bouwen ben, zodat het aan de randen van het scherm blijft plakken en er geen witte tussenruimte ontstaat.

Opvulling

Ik gebruik meestal wanneer ik een element binnen een rand heb, <div>of iets dergelijks, en ik wil de grootte verkleinen, maar op dat moment wil ik de afstand of de marge tussen de andere elementen eromheen.

Dus kort gezegd, het is situationeel; het hangt af van wat je probeert te doen.

Antwoord 14

Marge is buiten de doos en opvulling is binnen de doos