Unterschied zwischen Rand und Auffüllung

Inhaltsverzeichnis:

Unterschied zwischen Rand und Auffüllung
Unterschied zwischen Rand und Auffüllung

Video: Unterschied zwischen Rand und Auffüllung

Video: Unterschied zwischen Rand und Auffüllung
Video: HUB vs. SWITCH vs. ROUTER (einfach erklärt) | #Netzwerktechnik 2024, Juli
Anonim

Margin vs Padding

Der Unterschied zwischen Rand und Polsterung ist ein wichtiger Aspekt in CSS, da Rand und Polsterung zwei wichtige Konzepte sind, die in CSS verwendet werden, um einen Abstand zwischen verschiedenen Elementen bereitzustellen. Polsterung und Ränder sind nicht austauschbar und haben unterschiedliche Zwecke, daher müssen sie entsprechend verwendet werden. Der Abstand ist der Abstand zwischen dem Inh alt und dem Rand eines Blocks. Der Rand hingegen ist der Raum außerhalb der Grenze eines Blocks. Margin trennt Blöcke von benachbarten Blöcken, während Padding den Rand vom Inh alt trennt.

Was ist Padding?

In CSS (Cascading Style Sheets) ist Padding der Abstand zwischen dem Inh alt und dem Rand. Es trennt den Inh alt eines Blocks von seinem Rand. Die Füllung ist transparent und enthält auch das Hintergrundbild oder die Hintergrundfarbe des Elements. Die Füllmenge eines Elements wird durch den Begriff „Padding“im CSS-Code angegeben. Um beispielsweise eine 25-Pixel-Polsterung um den Inh alt hinzuzufügen, kann der folgende Code verwendet werden.

div {

Breite: 300px;

Höhe: 300px;

Padding: 25px;

Rand: 25px durchgehend;

}

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

div {

Breite: 300px;

Höhe: 300px;

polsterung-oben: 25px;

Polsterung unten: 35px;

Padding-links: 5px;

Padding-rechts: 10px;

Rand: 25px durchgehend;

}

Unterschied zwischen Rand und Polsterung
Unterschied zwischen Rand und Polsterung
Unterschied zwischen Rand und Polsterung
Unterschied zwischen Rand und Polsterung

Was ist Margin?

In CSS (Cascading Style Sheets) ist der Rand der Abstand 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 Margin wird in CSS mit dem Begriff „Marge“angegeben. Der folgende Codeabschnitt hat einen Rand von 25 Pixel um den div-Block herum angewendet.

div {

Breite: 320px;

Höhe: 320px;

Rand: 5px fest;

Rand: 25px;

}

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

div {

Breite: 320px;

Höhe: 320px;

Rand: 5px fest;

Rand oben: 25px;

margin-bottom: 35px;

Rand links: 5px;

Rand rechts: 10px;

}

Was ist der Unterschied zwischen Margin und Padding?

• Auffüllung ist der Abstand zwischen dem Rand und dem Inh alt, während Rand der Abstand außerhalb des Randes ist.

• Padding trennt den Inh alt eines Blocks vom Rand. Der Rand trennt einen Block vom anderen.

• Padding besteht aus den Hintergrundbildern und Hintergrundfarben, die auf den Inh alt angewendet werden, während der Rand solche Inh alte nicht enthält.

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

Zusammenfassung:

Padding vs. Rand

Padding ist der Abstand innerhalb der Grenze eines Blocks, der die Grenze vom Inh alt 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 padding das Hintergrundbild und die um den Inh alt herum angewendeten Hintergrundfarben enthält, während margin diese nicht enthält. Die Ränder benachbarter Blöcke können sich manchmal überlappen, wenn der Browser die Seite rendert, aber beim Auffüllen passiert so etwas nicht.

Empfohlen: