Wann wird Rand gegen Auffüllen in CSS verwendet? [Geschlossen]

Gibt es beim Schreiben von CSS eine bestimmte Regel oder Richtlinie, anhand derer entschieden werden sollte, wann marginund wann verwendet werden soll padding?

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

Für mich besteht der größte Unterschied zwischen Polsterung und Rand darin, dass vertikale Ränder automatisch kollabieren und Polster nicht.

Betrachten Sie zwei übereinanderliegende Elemente mit einer Polsterung von 1em. Diese Polsterung wird als Teil des Elements betrachtet und bleibt immer erhalten.

Sie erhalten also den Inhalt des ersten Elements, gefolgt vom Auffüllen des ersten Elements, gefolgt vom Auffüllen des zweiten Elements, gefolgt vom Inhalt des zweiten Elements.

Somit wird der Inhalt der beiden Elemente 2emgetrennt.

Ersetzen Sie nun diese Polsterung durch 1em Rand. Ränder werden als außerhalb des Elements befindlich betrachtet, und Ränder benachbarter Elemente überlappen sich.

In diesem Beispiel erhalten Sie den Inhalt des ersten Elements, gefolgt von einem 1emkombinierten Rand, gefolgt vom Inhalt des zweiten Elements. Der Inhalt der beiden Elemente ist also nur 1emgetrennt.

Dies kann sehr nützlich sein, wenn Sie wissen, dass Sie 1emeinen Abstand um ein Element angeben möchten , unabhängig davon, neben welchem ​​Element es sich befindet.

Die anderen beiden großen Unterschiede bestehen darin, dass die Auffüllung im Klickbereich und in der Hintergrundfarbe / im Hintergrundbild enthalten ist, nicht jedoch im Rand.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Der Rand befindet sich außen an den Blockelementen, während sich die Polsterung innen befindet.

• Verwenden Sie den Rand, um den Block von Dingen außerhalb zu trennen
• Verwenden Sie Polsterung, um den Inhalt von den Kanten des Blocks zu entfernen.

Das Beste, was ich gesehen habe, um dies anhand von Beispielen, Diagrammen und sogar einer Ansicht zum Ausprobieren zu erklären, finden Sie hier .

Das folgende Diagramm gibt meiner Meinung nach ein sofortiges visuelles Verständnis des Unterschieds.

Beachten Sie, dass standardkonforme Browser ( IE-Macken sind eine Ausnahme ) nur den Inhaltsteil auf die angegebene Breite rendern. Behalten Sie dies also bei Layoutberechnungen im Auge . Beachten Sie auch, dass Borderbox ein Comeback erlebt, das von Bootstrap 3 unterstützt wird.

Es gibt weitere technische Erklärungen für Ihre Frage. Wenn Sie jedoch nach einer Möglichkeit suchen , über Ränder und Auffüllungen nachzudenken , die Ihnen bei der Auswahl des Zeitpunkts und der Verwendung helfen, kann dies hilfreich sein.

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

• Das Browserfenster ist genau wie die Wand.
• Der Inhalt ist wie ein Foto.
• Der Rand entspricht genau dem Wandabstand zwischen gerahmten Bildern.
• Die Polsterung entspricht der Mattierung eines Fotos.
• Der Rand ist genau wie der Rand eines Rahmens.

Wenn zwischen Marge und Polsterung entscheiden, ist es eine nette Daumenregel zu verwenden Marge , wenn Sie ein Element in Beziehung an der Wand zu anderen Dingen sind Abstand und Polsterung , wenn Sie das Aussehen des Elements selbst sind anzupassen. Der Rand ändert die Größe des Elements nicht, aber durch Auffüllen wird das Element normalerweise größer ¹ .

¹ Dieses Standardboxmodell kann mit dem box-sizingAttribut geändert werden .

MARGIN vs PADDING :

1. Der Rand wird in einem Element verwendet, um einen Abstand zwischen diesem Element und anderen Elementen der Seite herzustellen. Wo Auffüllen verwendet wird, um Abstand zwischen Inhalt und Rand eines Elements zu erstellen.

2. Der Rand ist nicht Teil eines Elements, bei dem das Auffüllen Teil des Elements ist.

Bitte beziehen Sie sich auf das folgende Bild, das aus Margin Vs Padding - CSS Properties extrahiert wurde

Von https://www.w3schools.com/css/css_boxmodel.asp

Erklärung der verschiedenen Teile:

• Inhalt - Der Inhalt des Felds, in dem Text und Bilder angezeigt werden

• Auffüllen - Löscht einen Bereich um den Inhalt. Die Polsterung ist transparent

• Border - Eine Grenze , die um die Polsterung und Inhalt geht

• Margin - Löscht einen Bereich außerhalb der Grenze. Der Rand ist transparent

Live-Beispiel (herumspielen durch Ändern der Werte): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Hier finden Sie HTML- Code, der zeigt, wie paddingund wie sich margindie Klickbarkeit und die Hintergrundfüllung auswirken. Ein Objekt erhält Klicks auf seine Auffüllung, aber Klicks auf einen Randbereich eines Objekts gehen an sein übergeordnetes Objekt.

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

Die Sache mit den Rändern ist, dass Sie sich keine Gedanken über die Breite des Elements machen müssen.

Wenn Sie etwas geben {padding: 10px;}, müssen Sie die Breite des Elements um 20 Pixel reduzieren , um die Passform zu erhalten und andere Elemente in der Umgebung nicht zu stören.

Daher beginne ich im Allgemeinen mit Polstern, um alles zu erhalten packed, und verwende dann Ränder für kleinere Änderungen.

Beachten Sie auch, dass die Auffüllungen in verschiedenen Browsern konsistenter sind und der IE negative Ränder nicht sehr gut behandelt.

Der Rand löscht einen Bereich um ein Element (außerhalb des Rahmens), aber der Abstand löscht einen Bereich um den Inhalt (innerhalb des Rahmens) eines Elements.

Dies bedeutet, dass Ihr Element die äußeren Ränder nicht kennt. Wenn Sie also dynamische Websteuerelemente entwickeln, empfehle ich, wenn möglich Padding vs margin zu verwenden.

Beachten Sie, dass Sie manchmal den Rand verwenden müssen.

Es ist gut, die Unterschiede zwischen marginund zu kennen padding. Hier sind einige Unterschiede:

• Der Rand ist der Außenraum eines Elements, während der Abstand der Innenraum eines Elements ist.

• Der Rand ist der Raum außerhalb des Randes eines Elements, während der Abstand der Raum innerhalb des Randes eines Elements ist.

• Margin akzeptiert den Wert von auto : margin: auto, Sie können die Auffüllung jedoch nicht auf auto setzen.

• Der Rand kann auf eine beliebige Zahl eingestellt werden, die Auffüllung darf jedoch nicht negativ sein.

• Wenn Sie ein Element formatieren, wird auch das Auffüllen beeinflusst (z. B. Hintergrundfarbe), jedoch nicht der Rand.

Eine Sache, die Sie beachten sollten, ist, wenn Sie automatisch reduzierte Ränder stören (und Sie keine Hintergrundfarben für Ihre Elemente verwenden), was das Auffüllen nur einfacher macht.

Advanced Margin versus Padding erklärt

Es ist unangemessen, paddingInhalte in einem Element zu platzieren. Sie müssen verwenden marginauf das Kind - Element statt. Ältere Browser wie Internet Explorer haben das Box-Modell falsch interpretiert, außer wenn es um die Verwendung ging, margindie in Internet Explorer 4 perfekt funktioniert .

Es gibt zwei Ausnahmen bei der Verwendung padding ist geeignet Verwendung:

1. Es ist ein Inline - Element angelegt , die nicht , können keine Kind - Elemente , wie beispielsweise ein Eingangselement enthalten.

2. Wenn Sie einen sehr verschieden Browser Fehler kompensieren , die ein Anbieter * hust * Mozilla * hust * weigert sich sicher zu fixieren und sind (in dem Maße , dass Sie einen regelmäßigen Austausch mit W3C und WHATWG Redakteure halten) , dass Sie müssen eine funktionierende Lösung und diese Lösung haben wirkt sich nicht auf das Styling von etwas anderem als dem Fehler aus, den Sie kompensieren.

Wenn Sie ein Element mit 100% Breite haben, erhalten padding: 50px;Sie effektiv width: calc(100% + 100px);. Da margines nicht zum Element hinzugefügt widthwird, verursacht es keine unerwarteten Layoutprobleme, wenn Sie marginon child elementsanstelle von paddingdirekt auf dem Element verwenden.

Wenn Sie also eines dieser beiden Dinge nicht tun , fügen Sie dem Element keine Auffüllung hinzu, sondern den direkten untergeordneten Elementen, um sicherzustellen, dass Sie in allen Browsern das erwartete Verhalten erhalten .

Schauen wir uns zunächst die Unterschiede und die jeweiligen Verantwortlichkeiten an:

1)

Rand Die CSS-Randeigenschaften werden verwendet, um Platz um Elemente herum zu generieren.
Die Randeigenschaften legen die Größe des Leerraums außerhalb des Rahmens fest. Mit CSS haben Sie die volle Kontrolle über die Ränder.
Es gibt CSS-Eigenschaften zum Festlegen des Randes für jede Seite eines Elements (oben, rechts, unten und links).

2) Auffüllen

Die CSS-Auffüllungseigenschaften werden verwendet, um Platz um den Inhalt herum zu generieren.
Durch das Auffüllen wird ein Bereich um den Inhalt (innerhalb des Rahmens) eines Elements gelöscht.
Mit CSS haben Sie die volle Kontrolle über das Auffüllen. Es gibt CSS-Eigenschaften zum Festlegen der Auffüllung für jede Seite eines Elements (oben, rechts, unten und links).

Ränder sind also einfach Leerzeichen um Elemente, während Auffüllen Leerzeichen um Inhalte sind, die Teil des Elements sind.

Dieses Bild von Codemancern zeigt, wie Rand und Rahmen zusammenwachsen und wie sich Rahmen und Inhaltsfeld unterscheiden.

Außerdem definieren sie jeden Abschnitt wie folgt:

• Inhalt - Dies definiert den Inhaltsbereich des Felds, in dem sich der eigentliche Inhalt wie Text, Bilder oder andere Elemente befindet.
• Auffüllen - Hiermit wird der Hauptinhalt aus der enthaltenen Box gelöscht.
  
• Rand - Dies umgibt sowohl den Inhalt als auch das Auffüllen.
• Rand - Dieser Bereich definiert einen transparenten Raum, der ihn von anderen Elementen trennt.

Ich benutze immer dieses Prinzip:

Dies ist das Box-Modell aus der Inspect-Element-Funktion in Firefox. Es funktioniert wie eine Zwiebel:

• Ihr Inhalt ist in der Mitte.
• Das Auffüllen ist der Abstand zwischen Ihrem Inhalt und dem Rand des Tags, in dem es sich befindet.
• Die Grenze und ihre Spezifikationen
• Der Rand ist der Abstand um das Tag.

Größere Ränder schaffen also mehr Platz um die Box, die Ihren Inhalt enthält.

Eine größere Polsterung vergrößert den Abstand zwischen Ihrem Inhalt und der Box, in der er sich befindet.

Keiner von beiden vergrößert oder verkleinert die Box, wenn sie auf einen bestimmten Wert eingestellt ist.

Spanne

Der Rand wird normalerweise verwendet, um einen Raum zwischen dem Element selbst und seiner Umgebung zu schaffen.

Zum Beispiel verwende ich es, wenn ich eine Navigationsleiste baue, damit sie an den Rändern des Bildschirms haftet und keine weiße Lücke aufweist.

Polsterung

Ich verwende es normalerweise, wenn ich ein Element innerhalb eines Rahmens <div>oder ähnlichem habe und seine Größe verringern möchte, aber zu der Zeit möchte ich den Abstand oder den Rand zwischen den anderen Elementen um ihn herum beibehalten.

So kurz, es ist situativ; es hängt davon ab, was Sie versuchen zu tun.

Der Rand befindet sich außerhalb der Box und die Polsterung befindet sich innerhalb der Box