Frage Wann soll Margin vs Padding in CSS verwendet werden?


Gibt es beim Schreiben von CSS eine bestimmte Regel oder Richtlinie, die verwendet werden sollte, um zu entscheiden, wann sie verwendet werden soll? margin und wann zu verwenden padding?


1968
2018-02-03 03:20


Ursprung


Antworten:


TL; DR:  Standardmäßig verwende ich den Rand überall, außer wenn ich einen Rahmen oder Hintergrund habe und den Platz innerhalb dieses sichtbaren Rahmens vergrößern möchte.

Der größte Unterschied zwischen Padding und Marge ist für mich der vertikal Margin-Auto-Collapse und Padding nicht. Betrachten Sie zwei übereinander liegende Elemente mit jeweils einer Füllung von 1em. Diese Auffüllung wird als Teil des Elements betrachtet und bleibt immer erhalten. Sie erhalten also den Inhalt des ersten Elements, gefolgt von dem Auffüllen des ersten Elements, gefolgt von dem Auffüllen des zweiten Elements, gefolgt vom Inhalt des zweiten Elements. Der Inhalt der beiden Elemente wird also 2 m voneinander entfernt sein.

Ersetzen Sie nun dieses Padding durch 1-m-Rand. Die Ränder befinden sich außerhalb des Elements und die Ränder benachbarter Elemente überlappen sich. In diesem Beispiel erhalten Sie also den Inhalt des ersten Elements gefolgt von 1em des kombinierten Rands, gefolgt vom Inhalt des zweiten Elements. Der Inhalt der beiden Elemente ist also nur 1 m voneinander entfernt.

Dies kann sehr nützlich sein, wenn Sie wissen, dass Sie einen Abstand von einem Element zu einem Element angeben wollen, unabhängig davon, welches Element sich daneben befindet.

Die anderen beiden großen Unterschiede bestehen darin, dass im Klickbereich und in der Hintergrundfarbe / im Hintergrund Padding enthalten ist, nicht jedoch der Rand.


1213
2018-02-07 20:59



Rand befindet sich auf der Außenseite der Blockelemente, während die Polsterung innen ist.

  • Verwenden Sie Marge, um den Block von Dingen außerhalb zu trennen
  • Verwenden Sie den Abstand, um den Inhalt von den Kanten des Blocks wegzubewegen.

enter image description here


1336
2018-02-03 03:22



Das Beste, was ich gesehen habe, ist, dies mit Beispielen, Diagrammen und sogar einer "Probieren Sie es selbst" -Ansicht zu erklären Hier.

Das Diagramm unten, denke ich, gibt ein sofortiges visuelles Verständnis des Unterschieds.

enter image description here

Eine Sache, die man beachten sollte, sind standardkonforme Browser (IE Macken ist eine Ausnahme) rendern Sie nur den Inhaltsteil auf die angegebene Breite, also behalten Sie dies bei den Layoutberechnungen im Auge. Beachten Sie auch, dass die Rahmenbox etwas a sieht Comeback mit Bootstrap 3 unterstützt es.


524
2018-05-04 19:21



SPANNE vs POLSTERUNG :

  1. Der Rand wird in einem Element verwendet, um den Abstand zwischen diesem Element und anderen Elementen der Seite zu erstellen. Wo Padding verwendet wird, um Abstand zwischen Inhalt und Rahmen eines Elements zu erstellen.

  2. Rand ist nicht Teil eines Elements, bei dem das Padding Teil des Elements ist.

Bitte beziehen Sie sich auf das Bild aus extrahiert Margin Vs Padding - CSS-Eigenschaften

Margin vs Padding


76
2018-05-21 07:00



Es gibt mehr technische Erklärungen für Ihre Frage, aber wenn Sie nach einem Weg suchen nachdenken über margin & padding, die Ihnen helfen, zu wählen, wann und wie Sie sie verwenden, könnte dies helfen.

Vergleichen Sie Blockelemente mit Bildern, die an einer Wand hängen:

  • Das Browser Fenster ist wie die Mauer.
  • Das Inhalt ist wie ein Foto.
  • Das Spanne ist wie die Wand zwischen gerahmten Bildern.
  • Das Polsterung ist genau wie die Matte um ein Foto.
  • Das Rand ist genau wie die Grenze auf einem Rahmen.

Bei der Entscheidung zwischen Margin & Padding ist es eine gute Faustregel zu verwenden Spanne wenn Sie ein Element in Beziehung zu anderen Dingen an der Wand platzieren, und Polsterung wenn Sie das Erscheinungsbild des Elements selbst anpassen. Der Rand ändert nicht die Größe des Elements, aber durch das Füllen wird das Element normalerweise größer1.

1  Dieses Standard-Box-Modell kann mit dem geändert werden box-sizing Attribut.


72
2017-12-17 01:10



Hier ist etwas HTML, das zeigt, wie padding und margin beeinflussen Klickbarkeit und Hintergrundfüllung. Ein Objekt erhält Klicks auf sein Padding, aber Klicks auf ein Objekt mit Randbereich gehen zu seinem Elternobjekt.

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



Das Problem mit den Margen ist, dass Sie sich keine Gedanken über die Breite des Elements machen müssen.

Wie wenn du etwas gibst {padding: 10px;}, müssen Sie die Breite des Elements um verringern 20px den "behalten"passenund andere Elemente nicht stören.

Also fange ich generell damit an, Paddings zu benutzen, um alles zu bekommen.packed'und dann die Ränder für kleinere Optimierungen verwenden.

Eine andere Sache zu beachten ist, dass Paddings in verschiedenen Browsern konsistenter sind und IE negative Ränder nicht sehr gut behandelt.


30
2018-02-03 05:35