Unterschied zwischen Rand und Füllung?

Question

Was genau ist der Unterschied zwischen Marge y Polsterung in CSS? Es scheint wirklich nicht viel Sinn zu machen. Könnten Sie mir ein Beispiel dafür geben, wo die Unterschiede liegen (und warum es wichtig ist, den Unterschied zu kennen)?

Answer 1

Marge ist eine CSS-Eigenschaft, die verwendet wird, um Abstände um die Elemente außerhalb des Rahmens zu schaffen. Der Programmierer kann den Rand für oben, rechts, unten und links festlegen. Mit anderen Worten, er kann diese Werte mit margin-top, margin-right, margin-bottom und margin-left festlegen.

En Marge Werte können von den folgenden Typen sein.

Erstens: Auto erlaubt es dem Browser, den Rand zu berechnen. Darüber hinaus gibt length einen Rand in px, pt oder cm an, während % hilft, einen Rand als Prozentsatz relativ zur Breite des enthaltenen Elements zu beschreiben. Schließlich gibt inherit an, dass der Rand vom übergeordneten Element geerbt werden muss.

Polsterung ist eine CSS-Eigenschaft, die dazu dient, innerhalb des Rahmens Platz um ein Element zu schaffen. Der Programmierer kann das Padding für oben, rechts, unten und links einstellen. Mit anderen Worten, er kann diese Werte mit padding-top, padding-right, padding-bottom und padding-left festlegen.

En Polsterung Werte können von den folgenden Typen sein.

Die Länge beschreibt die Auffüllung in px, pt oder cm, während % die Auffüllung als Prozentsatz relativ zur Breite des enthaltenen Elements angibt. Mit inherit schließlich wird beschrieben, dass die Auffüllung vom übergeordneten Element geerbt werden soll.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Unterschied zwischen Rand und Auffüllung

Marge ist eine CSS-Eigenschaft, die verwendet wird, um Raum um das Element außerhalb des definierten Rahmens zu schaffen, während die Polsterung ist eine CSS-Eigenschaft, die verwendet wird, um innerhalb des definierten Rahmens Platz um das Element zu schaffen. Dies erklärt also den Hauptunterschied zwischen margin und padding.

Werte Außerdem können die Werte für margin auto, length, % oder inherit sein, während die Werte für padding length, % oder inherit sein können. Dies ist also ein weiterer Unterschied zwischen margin und padding.

Kurz gefasst, Rand und Polsterung sind zwei Eigenschaften in CSS, die die Gestaltung von Webseiten ermöglichen. Es ist nicht möglich, für diese Eigenschaften negative Werte zuzuweisen. Der Hauptunterschied zwischen margin und padding besteht darin, dass margin hilft, Platz um das Element außerhalb des Rahmens zu schaffen, während padding hilft, Platz um das Element innerhalb des Rahmens zu schaffen.

Answer 2

Padding ist der Abstand zwischen den nächstgelegenen Komponenten auf der Webseite und Margin ist der Abstand zum Rand der Webseite.

Answer 3

Mein Verständnis von Margin und Padding stammt aus dem Google-Entwickler-Tool im angehängten Bild

Einfach ausgedrückt, ist ein Rand der Raum um ein Element herum und eine Auffüllung der Raum zwischen einem Element und dem Inhalt innerhalb dieses Elements. Beide werden verwendet, um Lücken zu schaffen, aber auf unterschiedliche Weise.

Mit Marge Lücke schaffen:

Bei der Schaffung von Lücken werden die benachbarten Elemente weggeschoben

Verwenden Sie Padding, um eine Lücke zu schaffen:

Die Verwendung von Auffüllungen zur Schaffung von Lücken vergrößert entweder die Größe des Elements oder verkleinert den Inhalt darin

Warum ist es wichtig, den Unterschied zu kennen?

Es ist wichtig, den Unterschied zu kennen, damit Sie wissen, wann Sie eine der beiden Methoden einsetzen und wie Sie sie richtig einsetzen.

Es ist auch erwähnenswert, dass Ränder und Auffüllungen bei der Gestaltung des Layouts einer Website nützlich sind, da Ränder angeben, ob ein Element nach oben oder unten, links oder rechts verschoben wird, während Auffüllungen angeben, wie ein Element aussehen und in seinem Container sitzen wird.

Answer 4

Versuchen Sie, eine Hintergrundfarbe auf ein Block-Div mit Breite und Höhe zu setzen. Sie werden sehen, dass padding die Größe des Elements vergrößert, während margin es nur im Fluss des Dokuments verschiebt.

Der Rand ist speziell zum Verschieben des Elements gedacht.

Answer 5

Der Unterschied zwischen Padding und Margin liegt im Wesentlichen in der Art des Hintergrunds. Padding bestimmt den Abstand zwischen den Inhalten, während Margin den äußeren Rand der Elemente bestimmt!