css - oder - margin vs padding android




Wann wird Margin vs Padding in CSS verwendet (12)

Gibt es beim Schreiben von CSS eine bestimmte Regel oder Richtlinie, die bei der Entscheidung verwendet werden soll, wann margin und wann padding ?


Spanne

Margin wird normalerweise verwendet, um einen Abstand zwischen dem Element selbst und seiner Umgebung zu schaffen.

Ich verwende es beispielsweise, wenn ich eine Navbar baue, damit sie an den Bildschirmrändern kleben bleibt und keine weiße Lücke entsteht.

Polsterung

Normalerweise verwende ich sie, wenn sich innerhalb eines Rahmens ein Element, <div> oder etwas Ähnliches befindet, und ich möchte dessen Größe verringern. Zu diesem Zeitpunkt möchte ich jedoch den Abstand oder den Abstand zwischen den anderen Elementen beibehalten.

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


Wann werden Ränder und Polsterungen verwendet?

Es gibt zwei Möglichkeiten in CSS, um Platz um Ihre Elemente zu schaffen: Ränder und Auffüllen. In den meisten Anwendungsszenarien sind sie funktional identisch, in Wahrheit verhalten sie sich jedoch etwas unterschiedlich. Es gibt wichtige Unterschiede zwischen Rändern und Abstand, die Sie bei der Auswahl der Elemente zum Verschieben von Elementen auf der Seite berücksichtigen sollten. In den Fällen, in denen Margen oder Polsterung in der gleichen Weise eingesetzt werden könnten, hängt die Entscheidung jedoch hauptsächlich von den persönlichen Vorlieben ab.

Wann werden Ränder verwendet?

  1. Sie möchten, dass Ihr Abstand außerhalb des von einer Rahmeneigenschaft erstellten Felds angezeigt wird. Die Ränder liegen außerhalb der Grenzen. Sie können sie also verwenden, wenn Ihre Grenze an einem Ort bleiben soll. Dies kann nützlich sein, wenn Sie beispielsweise eine Seitenleiste mit einem Rand haben, die Sie vom Hauptinhaltsbereich entfernen möchten.

  2. Sie möchten nicht, dass Ihre Hintergrundfarbe oder Ihr Bild in Ihren persönlichen Bereich eindringt. Hintergrundfarben und -bilder werden am Rand angehalten. Wenn Sie Ihre Hintergründe lieber nicht in dem von Ihnen erstellten Bereich halten möchten, sind die Ränder die gewünschte Eigenschaft.

  3. Sie möchten einen zusammenklappbaren Bereich oben und unten in Ihrem Element. Die oberen und unteren Ränder verhalten sich anders als die seitlichen Ränder. Insofern, wenn zwei Ränder übereinander liegen, fallen sie auf die Größe des größten eingestellten Rands zusammen. Wenn ich beispielsweise einen Absatz auf einen oberen Rand von 20 Pixeln und einen unteren Rand von 15 Pixeln eingestellt habe, habe ich nur 20 Pixel Gesamtraum zwischen den Absätzen (die beiden Ränder fallen ineinander und der größte gewinnt). .

Wann ist das Auffüllen zu verwenden?

  1. Sie möchten, dass sich der gesamte Bereich, den Sie erstellen, innerhalb Ihrer Grenze befindet. Füllungen befinden sich innerhalb Ihrer Ränder, sodass Sie Ihre Ränder vom Inhalt innerhalb Ihres Elements entfernen können.

  2. Sie benötigen Ihre Hintergrundfarbe / Ihr Hintergrundbild, um in den von Ihnen erstellten Bereich zu gelangen. Ihr Hintergrund wird hinter Ihrer Polsterung fortgesetzt. Verwenden Sie ihn daher nur, wenn Sie möchten, dass Ihr Hintergrund herausschaut.

  3. Sie möchten, dass sich Ihr oberer und unterster Raum starrer verhält. Wenn Sie beispielsweise für die Absätze in Ihrem Dokument einen oberen Abstand von 20 Pixeln und einen unteren Abstand von 15 Pixeln festlegen, haben Sie immer dann, wenn Sie zwei Absätze in einer Reihe hatten, insgesamt 35 Pixel Platz zwischen ihnen.


Bei Rändern müssen Sie sich nicht um die Breite des Elements kümmern.

Wie wenn Sie etwas {padding: 10px;} , müssen Sie die Breite des Elements um 20px reduzieren , um die Passform zu erhalten und andere Elemente nicht zu stören.

Daher fange ich im Allgemeinen mit Paddings an, um alles zu "packen" und dann Ränder für kleinere Änderungen zu verwenden.

Eine weitere Sache, die Sie beachten sollten, ist, dass die Auffüllungen in verschiedenen Browsern konsistenter sind und der IE negative Margen nicht sehr gut verträgt.


CSS-Margin, -Polsterung und -Rahmen sind Box-Modell-Eigenschaften.

  • Margin ist Platz außerhalb des Inhalts.
  • Das Auffüllen ist Platz innerhalb des Inhalts.
  • Der Rand ist eine sichtbare Umrandung (jede Farbe, Stil und Breite) außerhalb der Auffüllung.

Gesamtbreite = Inhaltsbreite + Auffüllung + Rand.


Der Rand befindet sich an der Außenseite der Blockelemente, während die Polsterung an der Innenseite ist.

  • Verwenden Sie einen Rand, um den Block von den Dingen außerhalb zu trennen
  • Verwenden Sie die Auffüllung, um den Inhalt von den Rändern des Blocks wegzubewegen.


Der Rand ist außerhalb des Kastens und die Polsterung ist innerhalb des Kastens


Erklärung der verschiedenen Teile:

Inhalt - Der Inhalt der Box, in dem Text und Bilder angezeigt werden

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

Rahmen - Ein Rand, der die Polsterung und den Inhalt umgibt

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

Hier ist das Live-Beispiel: (Spielen Sie mit den Werten herum) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel


Es gibt mehr technische Erklärungen für Ihre Frage, aber wenn Sie nach einer Möglichkeit suchen , über Marge und Polsterung nachzudenken , die Ihnen hilft zu entscheiden, wann und wie Sie sie verwenden sollen, könnte dies hilfreich sein.

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

  • Das Browserfenster ist wie die Wand.
  • Der Inhalt ist wie ein Foto.
  • Der Rand ist genauso wie die Wandfläche zwischen gerahmten Bildern.
  • Die Polsterung ist wie die Mattierung um ein Foto.
  • Die Grenze ist wie die Grenze eines Rahmens.

Bei der Entscheidung zwischen Rand und Polsterung ist es eine nette Faustregel, den Rand zu verwenden, wenn Sie ein Element in Beziehung zu anderen Dingen an der Wand setzen, und das Polster, wenn Sie das Erscheinungsbild des Elements selbst anpassen. Der Rand ändert die Größe des Elements nicht, aber durch Auffüllen wird das Element normalerweise größer 1 .

1 Dieses Standard-Boxmodell kann mit dem Attribut " box-sizing geändert werden .


Hier ist ein HTML-Code, der demonstriert, wie padding und Ränder die Klickbarkeit und den Hintergrund ausfüllen. Ein Objekt erhält Klicks auf seine Auffüllung, Klicks auf einen Objektrandbereich werden jedoch an den übergeordneten Bereich weitergeleitet.

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


Ich benutze immer dieses Prinzip:

Dies ist das Boxmodell aus dem Element inspect in Firefox. Es funktioniert wie eine Zwiebel:

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

Größere Ränder schaffen also mehr Platz um die Box, in der sich Ihre Inhalte befinden.

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

Keines der Felder erhöht oder verringert die Größe des Felds, wenn es auf einen bestimmten Wert eingestellt ist.


Erweiterte Margin versus Padding erklärt

Es ist unangemessen, den Inhalt eines Elements mit padding zu füllen. Sie müssen stattdessen den margin für das untergeordnete Element verwenden. Ältere Browser wie der Internet Explorer haben das Boxmodell falsch interpretiert, es sei denn, es wurde ein margin der in Internet Explorer 4 einwandfrei funktioniert.

Es gibt zwei Ausnahmen, wenn die Verwendung von padding geeignet ist:

  1. Sie wird auf ein Inline-Element angewendet, das keine untergeordneten Elemente wie ein Eingabeelement enthalten darf .

  2. Sie kompensieren einen sehr unterschiedlichen Browser-Fehler, den ein Hersteller * Husten * Mozilla * Husten * nicht beheben möchte, und sind sicher (sofern Sie regelmäßig mit W3C- und WHATWG-Editoren austauschen), dass Sie über eine funktionierende Lösung und diese Lösung verfügen wirkt sich nicht auf das Styling von etwas anderem als dem Fehler aus, den Sie kompensieren.

Wenn Sie ein 100% padding: 50px; Element mit padding: 50px; Sie erhalten effektiv width: calc(100% + 100px); . Da der width kein margin hinzugefügt wird, führt dies nicht zu unerwarteten Layoutproblemen, wenn Sie den margin für child elements verwenden und nicht direkt auf das Element padding .

Wenn Sie also nicht eines dieser beiden Dinge ausführen , fügen Sie dem Element keine Auffüllung hinzu, sondern dessen direktes child / children-Element, um sicherzustellen, dass Sie das erwartete Verhalten in allen Browsern erhalten.


MARGIN vs PADDING :

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

  2. Der Rand ist nicht Teil eines Elements, bei dem die Auffüllung Teil des Elements ist.

Bitte beachten Sie das Bild, das aus Margin Vs Padding - CSS Properties extrahiert wurde







margin