Unterschied zwischen Margin und Padding

Margin vs Padding
 

Der Unterschied zwischen Rand und Polsterung ist ein wichtiger Aspekt in CSS Margin und Padding sind zwei wichtige Konzepte, die in CSS verwendet werden, um einen Abstand zwischen verschiedenen Elementen bereitzustellen. Polsterung und Ränder sind nicht austauschbar und dienen unterschiedlichen Zwecken. Sie müssen daher entsprechend verwendet werden. Die Auffüllung ist der Abstand zwischen dem Inhalt und dem Rand eines Blocks. Der Rand ist dagegen der Raum außerhalb der Blockgrenze. Der Rand unterscheidet Blöcke von benachbarten Blöcken, während die Auffüllung den Rand vom Inhalt trennt.

Was ist Padding??

In CSS (Cascading Style Sheets), Abstand ist der Abstand zwischen Inhalt und Rand. Es trennt den Inhalt eines Blocks von seinem Rand. Die Auffüllung ist transparent und umfasst auch das Hintergrundbild oder die Hintergrundfarbe des Elements. Die Auffüllung eines Elements wird mit dem Begriff „Auffüllen“ im CSS-Code angegeben. Um zum Beispiel eine 25px-Auffüllung um den Inhalt hinzuzufügen, kann folgender Code verwendet werden.

div
Breite: 300px;
Höhe: 300px;
Polsterung: 25px;
Rand: 25px fest;

Bei Bedarf können verschiedene Auffüllwerte für links, rechts, oben und unten separat angegeben werden. Der folgende Code gibt verschiedene Auffüllwerte für jede Seite an.

div
Breite: 300px;
Höhe: 300px;
Polsterauflage: 25px;
Polsterung unten: 35px;
Polsterung links: 5px;
Polsterung rechts: 10px;
Rand: 25px fest;

Was ist Marge??

In CSS (Cascading Style Sheets) ist der Rand der Bereich außerhalb des Rahmens. Es trennt einen Block von anderen Blöcken. Der Rand ist ebenfalls transparent, der Unterschied zwischen den Auffüllungen besteht jedoch darin, dass der Rand keine Hintergrundbilder oder Hintergrundfarben enthält, die auf das Element angewendet werden. Der Margin-Betrag in CSS wird mit dem Begriff „Margin“ angegeben. Der folgende Code hat einen 25px-Rand um den div-Block angewendet.

div
Breite: 320px;
Höhe: 320px;
Rand: 5px fest;
Marge: 25px;

Es können auch unterschiedliche Werte für verschiedene Seiten des Blocks angegeben werden. Der folgende Codeteil wendet unterschiedliche Randwerte für jede Seite an.

div
Breite: 320px;
Höhe: 320px;
Rand: 5px fest;
Rand oben: 25px;
Rand unten: 35px;
Rand links: 5px;
Rand rechts: 10px;

Was ist der Unterschied zwischen Margin und Padding??

• Abstand ist der Abstand zwischen dem Rand und dem Inhalt, während der Rand der Abstand außerhalb des Randes ist.

• Durch Auffüllen wird der Inhalt eines Blocks vom Rand getrennt. Der Rand trennt einen Block vom anderen.

• Das Auffüllen besteht aus den Hintergrundbildern und den Hintergrundfarben, die auf den Inhalt angewendet werden, während der Rand keinen solchen Inhalt hat.

• Ränder benachbarter Blöcke können sich überlappen, während sich das Auffüllen nicht überlappt.

Zusammenfassung:

Polsterung vs Margin

Das Auffüllen ist der Raum innerhalb des Rands eines Blocks, der den Rand vom Inhalt trennt. Der Rand ist der Abstand außerhalb der Grenze, der einen Block von den benachbarten Blöcken trennt. Ein weiterer Unterschied besteht darin, dass das Auffüllen das Hintergrundbild und Hintergrundfarben umfasst, die um den Inhalt angewendet werden, während der Rand sie nicht enthält. Die Ränder benachbarter Blöcke können sich manchmal überlappen, wenn der Browser die Seite rendert. Für das Auffüllen wird dies jedoch nicht passieren.

Bilder mit freundlicher Genehmigung:

1. CSS-Boxmodell durch Felix.leg (CC BY-SA 3.0)