Unterschied zwischen Rand und Polsterung?

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

paddingist der Raum zwischen dem Inhalt und dem border, während marginder Raum außerhalb der Grenze ist. Hier ist ein Bild, das ich bei einer schnellen Google-Suche gefunden habe und das diese Idee veranschaulicht.

Eine wichtige Sache, die in den Antworten hier fehlt:

Die oberen / unteren Ränder sind zusammenklappbar.

Wenn Sie also einen Rand von 20 Pixel am unteren Rand eines Elements und einen Rand von 30 Pixel am oberen Rand des nächsten Elements haben, beträgt der Rand zwischen den beiden Elementen 30 Pixel anstatt 50 Pixel. Dies gilt nicht für den linken / rechten Rand oder die Polsterung.

Der Rand wird auf die Außenseite Ihres Elements angewendet, wodurch beeinflusst wird, wie weit Ihr Element von anderen Elementen entfernt ist.

Das Innere Ihres Elements wird aufgefüllt, wodurch beeinflusst wird, wie weit der Inhalt Ihres Elements vom Rand entfernt ist.

Die Verwendung des Randes wirkt sich auch nicht auf die Abmessungen Ihres Elements aus, wohingegen das Auffüllen die Abmessungen Ihrer Elemente ändert (Höhe + Auffüllen einstellen). Wenn Sie beispielsweise ein Div mit 100 x 100 Pixel und einem Abstand von 5 Pixel haben, beträgt Ihr Div tatsächlich 105 x 105 Pixel

Denken Sie an diese 3 Punkte:

• Der Rand ist der zusätzliche Platz um die Steuerung.
• Die Polsterung bietet zusätzlichen Platz innerhalb der Steuerung.
• Das Auffüllen eines äußeren Steuerelements ist der Rand eines inneren Steuerelements .

Demo-Bild: (wobei das rote Kästchen die Wunschkontrolle ist)

Die einfachste Verteidigung ist; Auffüllen ist ein Leerzeichen innerhalb des Randes des Containerelements und der Rand außerhalb. Für ein Element, das kein Container ist, ist die Polsterung möglicherweise nicht sehr sinnvoll, aber der Rand hilft auf jeden Fall, es anzuordnen.

Auffüllen ist Platz innerhalb der Grenze, während Rand Platz außerhalb der Grenze ist.

Polsterung

Padding ist eine CSS-Eigenschaft, die den Abstand zwischen einem Elementinhalt und seinem Rand definiert (sofern dieser einen Rand hat). Wenn ein Element von einem Rand umgeben ist, gibt das Auffüllen Platz von diesem Rand zum Elementinhalt, der in diesem Rand angezeigt wird. Wenn ein Element keinen Rand hat, hat das Hinzufügen von Auffüllungen überhaupt keine Auswirkung auf dieses Element, da es keinen Rand gibt, an dem Platz vorhanden ist.

Spanne

Margin ist eine CSS-Eigenschaft, die den Abstand von außerhalb eines Elements zu seinem nächsten externen Element definiert.

Der Rand wirkt sich auf Elemente aus, die beide Ränder haben oder nicht. Wenn ein Element einen Rand hat, definiert der Rand den Abstand von diesem Rand zum nächsten äußeren Element. Wenn ein Element keinen Rand hat, definiert der Rand den Abstand vom Elementinhalt zum nächsten äußeren Element.

Unterschied zwischen Polsterung und Rand

Der Unterschied zwischen Rand und Auffüllung besteht also darin, dass sich die Auffüllung auf den Innenraum bezieht, während sich der Rand auf den Außenraum zum nächsten äußeren Element bezieht.

Einer der Hauptunterschiede zwischen Rand und Polsterung wird in keiner der Antworten erwähnt: Klickbarkeit und Schwebeerkennung

Durch Erhöhen der Polsterung wird die effektive Größe des Elements erhöht. Manchmal habe ich ein kleines Symbol, das ich nicht sichtbar vergrößern möchte, aber der Benutzer muss trotzdem mit diesem Symbol interagieren. Ich vergrößere die Polsterung des Symbols, um eine größere Stellfläche für Klicks und Hover zu erhalten. Das Erhöhen des Symbolrandes hat nicht den gleichen Effekt.

Eine Antwort auf eine andere Frage zu diesem Thema gibt ein Beispiel.

Rand = Abstand um (außerhalb) des Elements vom Rand nach außen.

padding = Abstand um (innerhalb) des Elements vom Text bis zum Rand.

siehe hier: http://jsfiddle.net/robx/GaMpq/

Es ist gut, die Unterschiede zwischen marginund zu kennen padding. Wie ich weiss:

• Der Rand ist der äußere Raum eines Elements, während das Auffüllen der innere Raum eines Elements ist. Mit anderen Worten, Rand ist der Raum außerhalb des Rahmens eines Elements, während Auffüllen der Raum innerhalb seines Rahmens ist.
• Sie können den autoWert auf Rand setzen. Das Auffüllen ist jedoch nicht zulässig. Sehen Sie das .
  Hinweis: Verwenden Sie diese Option, margin: autoum ein Blockelement innerhalb seines übergeordneten Elements horizontal zu zentrieren. Es ist auch möglich, ein Element innerhalb einer Flexbox vertikal oder horizontal oder beides zu zentrieren, indem der Rand auf Auto gesetzt wird. Sehen Sie das .
• Der Rand kann eine beliebige Gleitkommazahl sein, die Polsterung darf jedoch nicht negativ sein.
• Wenn Sie ein Element stylen, wird auch die Polsterung gestylt. aber nicht Rand. Margin erhält den Stil des übergeordneten Elements. Wenn Sie beispielsweise die background-colorEigenschaft auf Schwarz setzen, ist ihr innerer Raum (dh Auffüllen) schwarz, nicht jedoch ihr äußerer Raum (dh Rand).

Rand ist Raum außerhalb der Box; Polsterung ist Platz in der Box. Es ist schwer, den Unterschied mit einer weißen Füllung zu erkennen, aber mit einer farbigen Füllung können Sie ihn gut erkennen.

Rand und Abstand sind beide Arten des Auffüllens. Einer (Rand) geht außerhalb des Elementrahmens, um ihn von anderen Elementen zu entfernen, und der andere (Abstand) geht außerhalb des Elementinhalts, um den Inhalt vom Elementrand zu entfernen.

Durch das Auffüllen kann der Entwickler den Abstand zwischen dem Text und dem umschließenden Element beibehalten. Rand ist der Raum, den das Element mit einem anderen Element des übergeordneten DOM verwaltet.

Siehe Beispiel:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

Rand ist eine Eigenschaft in CSS, mit der Leerzeichen um die Elemente außerhalb des Rahmens erstellt werden. Der Programmierer kann den Rand für oben, rechts, unten und links einstellen. Mit anderen Worten, er kann diese Werte mit Rand oben, Rand rechts, Rand unten und Rand links einstellen.

Die Randwerte können vom folgenden Typ sein.

Erstens ermöglicht auto dem Browser, die Marge zu berechnen. Darüber hinaus bezeichnet die Länge einen Rand in px, pt oder cm, während% dazu beiträgt, einen Rand als Prozentsatz relativ zur Breite des enthaltenden Elements zu beschreiben. Schließlich bedeutet erben, dass der Rand vom übergeordneten Element erben muss.

Das Auffüllen ist eine Eigenschaft in CSS, mit der Platz um ein Element innerhalb des Rahmens geschaffen werden kann. Der Programmierer kann die Polsterung 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 einstellen.

Die Auffüllwerte können vom folgenden Typ sein.

Die Länge beschreibt das Auffüllen in px, pt oder cm, während% das Auffüllen als Prozentsatz relativ zur Breite des enthaltenden Elements bezeichnet. Schließlich beschreibt erben, dass das Auffüllen 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 Polsterung

Rand ist eine CSS-Eigenschaft, mit der Platz um das Element außerhalb des definierten Rahmens erstellt wird , während das Auffüllen eine CSS-Eigenschaft ist, mit der Platz um das Element innerhalb des definierten Rahmens erstellt wird. Dies erklärt somit den Hauptunterschied zwischen Rand und Polsterung.

Werte Darüber hinaus können die Werte für margin automatisch, länge,% oder geerbt sein, während die Werte für padding Länge,% oder erben können. Daher ist dies ein weiterer Unterschied zwischen Rand und Polsterung.

Kurz gesagt, Rand und Abstand sind zwei Eigenschaften in CSS, mit denen die Webseiten gestaltet werden können. Es ist nicht möglich, diesen Eigenschaften negative Werte zuzuweisen. Der Hauptunterschied zwischen Rand und Abstand besteht darin, dass der Rand dazu beiträgt, Platz um das Element außerhalb des Rahmens zu schaffen, während der Abstand dazu beiträgt, Platz um das Element innerhalb des Rahmens zu schaffen.

Versuchen Sie, eine Blockfarbe mit Breite und Höhe auf ein Block-Div zu setzen. Sie werden sehen, dass das Auffüllen das Element vergrößert, während der Rand es nur innerhalb des Dokumentflusses verschiebt.

Der Rand dient speziell zum Verschieben des Elements.

Das Auffüllen ist der Abstand zwischen den nächsten Komponenten auf der Webseite, und der Rand ist der Abstand vom Rand der Webseite.

Eine Sache ist mir gerade aufgefallen, aber keine der oben genannten Antworten wurde erwähnt. Wenn ich ein dynamisch erstelltes DOM-Element habe, das mit leerem innerem HTML-Inhalt initialisiert ist, empfiehlt es sich, den Rand anstelle des Auffüllens zu verwenden, wenn dieses leere Element keinen Platz belegen soll, außer dass sein Inhalt erstellt wird.

Es gibt einen wichtigen Unterschied:

Der Rand befindet sich außerhalb des Elements, dh es wird die Leerzeichenverschiebung "nach" dem Beginn des Elements angewendet. Padding- befindet sich auf der Innenseite, der andere wendet das Leerzeichen "bevor" das Element beginnt.

Der Rand wird auf die Außenseite Ihres Elements angewendet, wodurch beeinflusst wird, wie weit Ihr Element von anderen Elementen entfernt ist.

Das Innere Ihres Elements wird aufgefüllt, wodurch beeinflusst wird, wie weit der Inhalt Ihres Elements vom Rand entfernt ist.

Die Verwendung des Randes wirkt sich auch nicht auf die Abmessungen Ihres Elements aus, wohingegen das Auffüllen die Abmessungen Ihrer Elemente ändert (Höhe + Auffüllen einstellen). Wenn Sie beispielsweise ein Div mit 100 x 100 Pixel und einem Abstand von 5 Pixel haben, beträgt Ihr Div tatsächlich 105 x 105 Pixel

Grundsätzlich liegt der Unterschied zwischen Polsterung und Rand im Hintergrund. Das Auffüllen bestimmt den Abstand zwischen den Inhalten, während der Rand die Außenkante der Elemente bestimmt!

Das Auffüllen ist der Raum zwischen Ihrem Inhalt und dem Rand. Wobei als Rand der Raum zwischen der Grenze und dem anderen Element ist.