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

Auffüllen ist Leerzeichen innerhalb die Grenze, während Margin Raum ist außerhalb die Grenze.

Answer 2

Polsterung

Padding ist eine CSS-Eigenschaft, die den Abstand zwischen dem Inhalt eines Elements und seiner Umrandung definiert (falls es eine Umrandung hat). Wenn ein Element von einem Rahmen umgeben ist, wird durch die Auffüllung ein Abstand zwischen diesem Rahmen und dem Inhalt des Elements geschaffen, der innerhalb dieses Rahmens erscheint. Wenn ein Element keinen Rahmen hat, hat das Hinzufügen von padding keinerlei Auswirkung auf das Element, da es keinen Rahmen gibt, von dem aus es Platz gibt.

Marge

Margin ist eine CSS-Eigenschaft, die den Abstand zwischen der Außenseite eines Elements und dem nächsten Element außerhalb definiert.

Der Rand wirkt sich auf Elemente aus, die sowohl mit als auch ohne Rand versehen sind. Wenn ein Element einen Rand hat, definiert margin den Abstand von diesem Rand zum nächsten äußeren Element. Wenn ein Element keinen Rand hat, definiert margin den Abstand vom Elementinhalt zum nächsten äußeren Element.

Unterschied zwischen Padding und Margin

Der Unterschied zwischen Margin und Padding besteht also darin, dass sich Padding mit dem inneren Raum befasst, Margin hingegen mit dem äußeren Raum zum nächsten äußeren Element.

Answer 3

Einer der wichtigsten Unterschiede zwischen Rand und Füllung wird in keiner der Antworten erwähnt: Klickbarkeit und Hover-Erkennung

Durch Vergrößerung der Füllung 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 das Padding des Symbols, um ihm eine größere Grundfläche für Klicks und Hover zu geben. Eine Vergrößerung des Randes des Symbols hat nicht den gleichen Effekt.

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

Answer 4

Es ist gut zu wissen, was die Unterschiede zwischen margin y padding . Wie ich weiß:

• Die Marge ist die Weltraum eines Elements, während das Auffüllen die innerer Raum eines Elements. Mit anderen Worten: margin ist der Raum außerhalb des Rahmens eines Elements, während padding der Raum innerhalb des Rahmens ist.
• Sie können einstellen auto Wert auf Marge. Für die Auffüllung ist dies jedoch nicht zulässig. Siehe dies .
  Anmerkung: Verwenden Sie margin: auto um 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 margin auf auto gesetzt wird. Siehe dies .
• Der Rand kann eine beliebige Fließkommazahl sein, aber padding darf nicht negativ sein.
• Wenn Sie ein Element formatieren, wird auch padding formatiert, nicht aber margin. Der Rand erhält den Stil des übergeordneten Elements. Wenn Sie zum Beispiel die Option background-color auf schwarz setzen, wird der innere Bereich (d. h. die Füllung) schwarz sein, aber nicht der äußere Bereich (d. h. der Rand).

Answer 5

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

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

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