Unterschied Zwischen Rand Und Polsterung

2024 Autor: Mildred Bawerman | [email protected]. Zuletzt bearbeitet: 2023-12-16 08:37

Margin vs Padding

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

Was ist Polsterung?

In CSS (Cascading Style Sheets) ist das Auffüllen der Abstand zwischen Inhalt und Rand. Es trennt den Inhalt eines Blocks von seiner Kante. Die Polsterung ist transparent und enthält auch das Hintergrundbild oder die Hintergrundfarbe des Elements. Der Umfang des Auffüllens eines Elements wird unter Verwendung des Begriffs "Auffüllen" im CSS-Code angegeben. Um beispielsweise einen 25-Pixel-Abstand um den Inhalt hinzuzufügen, kann der folgende Code verwendet werden.

div {

width: 300px;

Höhe: 300px;

Polsterung: 25px;

Rand: 25px fest;

}}

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

div {

width: 300px;

Höhe: 300px;

Polsterung: 25px;

Polsterung unten: 35px;

Polsterung links: 5px;

Polsterung rechts: 10px;

Rand: 25px fest;

}}

Was ist Margin?

In CSS (Cascading Style Sheets) ist der Rand der Raum außerhalb des Rahmens. Es trennt einen Block von anderen Blöcken. Der Rand ist ebenfalls transparent, aber ein großer Unterschied zum Auffüllen besteht darin, dass der Rand keine Hintergrundbilder oder Hintergrundfarben enthält, die auf das Element angewendet werden. Die Höhe der Marge in CSS wird mit dem Begriff „Marge“angegeben. Mit dem folgenden Code wurde ein 25-Pixel-Rand um den div-Block angewendet.

div {

width: 320px;

Höhe: 320px;

Rand: 5px fest;

Rand: 25px;

}}

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

div {

width: 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?

• Das Auffüllen ist der Abstand zwischen dem Rand und dem Inhalt, während der Rand der Abstand außerhalb des Rahmens 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 Hintergrundfarben, die auf den Inhalt angewendet werden, während der Rand keinen Inhalt enthält.

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

Zusammenfassung:

Polsterung gegen Margin

Auffüllen ist der Bereich innerhalb des Rahmens eines Blocks, der den Rand vom Inhalt trennt. Der Rand ist der Abstand außerhalb des Rahmens, der einen Block von den benachbarten Blöcken trennt. Ein weiterer Unterschied besteht darin, dass das Auffüllen das Hintergrundbild und die Hintergrundfarben enthält, 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, aber zum Auffüllen geschieht dies nicht.

Bilder mit freundlicher Genehmigung: