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

padding ist der Abstand zwischen dem Inhalt und dem border in der Erwägung, dass margin ist der Raum außerhalb des Rahmens. Hier ist ein Bild, das ich bei einer schnellen Google-Suche gefunden habe und das diese Idee veranschaulicht.

Answer 2

Ein wichtiger Punkt, der in den Antworten hier fehlt:

Die oberen/unteren Ränder sind zusammenklappbar.

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

Answer 3

Die Marge wird auf den außerhalb Ihres Elements und beeinflusst damit, wie weit Ihr Element von anderen Elementen entfernt ist.

Die Polsterung wird auf die innerhalb des Elements und beeinflusst damit, wie weit der Inhalt des Elements vom Rand entfernt ist.

Auch mit Marge wird nicht auf Ihr Element Dimensionen, während Padding wird Ihre Elemente Dimensionen (Höhe + Padding) so zum Beispiel, wenn Sie eine 100x100px div mit einem 5px Padding haben, wird Ihr div tatsächlich 105x105px sein

Answer 4

Denken Sie an diese 3 Punkte:

• Die Marge ist der zusätzliche Platz um die Kontrolle.
• Das Padding ist zusätzlicher Platz innerhalb die Kontrolle.
• Die Auffüllung von ein äußeres Steuerelement ist die Marge eines inneren Steuerelements .

Demobild: (der rote Kasten ist die Wunschkontrolle)

Answer 5

Die einfachste Definition ist ; padding ist ein Abstand, der innerhalb des Rahmens des Containerelements angegeben wird, und margin wird außerhalb angegeben. Für ein Element, das kein Container ist, macht padding vielleicht nicht viel Sinn, aber margin hilft definitiv bei der Anordnung.