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

Der Rand wird auf die Außenseite des Elements angewendet und bestimmt somit, wie weit das Element von anderen Elementen entfernt ist.

Die Auffüllung wird auf die Innenseite des Elements angewendet und beeinflusst somit, wie weit der Inhalt des Elements vom Rand entfernt ist.

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

Answer 2

Eine Sache, die mir gerade aufgefallen ist, aber in keiner der obigen Antworten erwähnt wurde. Wenn ich ein dynamisch erstelltes DOM-Element habe, das mit einem leeren inneren HTML-Inhalt initialisiert wird, ist es eine gute Praxis, margin anstelle von padding zu verwenden, wenn Sie nicht wollen, dass dieses leere Element keinen Platz einnimmt, außer sein Inhalt wird erstellt.

Answer 3

Es gibt einen wichtigen Unterschied:

Margin- befindet sich außerhalb des Elements, d.h. man wendet die Leerzeichenverschiebung "nach" dem Beginn des Elements an. Padding- befindet sich auf der Innenseite, die andere wendet den Leerraum "vor" dem Beginn des Elements an.

Answer 4

Padding ist der Abstand zwischen dem Inhalt und dem Rand. Margin ist der Abstand zwischen die Rahmen und dem anderen Element.