Verwendung von margin und padding in CSS

1. Einführung von Margin in CSS
2. Einführung von Padding in CSS

Margin und Padding können in CSS ähnlich aussehen, aber sie sind unterschiedlich. Dieses Tutorial führt Margin und Padding in CSS ein. Dann werden wir den Unterschied zwischen ihnen kennen und lernen, wann Margin und Padding verwendet werden.

Einführung von Margin in CSS

In CSS ist der Rand der Abstand zwischen zwei benachbarten Elementen. Es ist der Raum zwischen der Grenze der beiden benachbarten Elemente. Der Rand eines Elements steuert nicht den Raum innerhalb des Elements. Es ist vielmehr für den Raum direkt außerhalb des Elements verantwortlich. Mit der Eigenschaft margin legen wir den Rand aller vier Seiten des Elements fest. Wir schreiben vier Werte in die Eigenschaft margin. Die Werte stehen für margin-top, margin-right, margin-bottom und margin-left der Reihe nach. Wir können es wie folgt veranschaulichen.

element {
margin: 20px 20px 20px 20px;
}

Der obige Code legt den 20px-Rand eines Elements von allen vier Seiten fest.

Wenn wir nur die drei Werte verwenden, repräsentiert der Wert in der Mitte die Eigenschaften margin-left und margin-right. Hat die Eigenschaft margin nur zwei Werte, stellt der erste Wert den Rand oben und unten dar und der zweite Wert den Rand links und rechts. Ein einzelner Randwert repräsentiert den Rand an allen vier Seiten.

Lassen Sie uns nun demonstrieren, was eine Marge ist. Erstellen Sie beispielsweise zwei Divs mit den Klassen redbox und bluebox. Geben Sie jeder Klasse height und width von 200px an. Stellen Sie die background-color der Kästchen auf red und blue. Setzen Sie dann die Eigenschaft margin-bottom der redbox, der oberen Box, auf 20px.

Im folgenden Beispiel werden zwei Felder mit roten und blauen Farben erstellt. Die Eigenschaft margin-bottom bietet einen Abstand von 20px vom Rand der roten Box nach unten. Das bedeutet, dass der blaue Kasten einen Abstand von 20px zum roten Kasten hat. Wenn wir die Eigenschaft margin-bottom entfernen, wird das Leerzeichen entfernt und die beiden Kästchen hängen sich an. Beachten Sie, dass die Texte in beiden Kästchen am Rand der Kästchen ohne Leerzeichen links und oben angebracht sind.

Beispielcode:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

Wir können den CSS-Rand verwenden, wenn wir die Position eines Elements auf unserer Webseite ändern möchten. Mit der Eigenschaft margin können wir das Element nach links, rechts, oben und unten verschieben. Eine andere Verwendung von margin kommt, wenn wir den Abstand zwischen zwei benachbarten Elementen angeben müssen. Wir haben es im obigen Beispiel veranschaulicht. Wir können sogar den negativen Randwert in Elementen verwenden, um einen Überlappungseffekt zu erzielen. Dies sind einige Anwendungsfälle von CSS-Margin.

Einführung von Padding in CSS

Padding ist der Abstand zwischen dem Rand eines Elements und dem Inhalt des Elements. Es ist der Raum innerhalb eines Elements und hat keine Kontrolle über den Bereich außerhalb des Elements. Wir verwenden die Eigenschaft padding, um die Auffüllung eines Elements festzulegen. Wir können vier Werte, drei Werte, zwei Werte und einen einzelnen Wert verwenden, um die Auffüllung eines Elements darzustellen. Die Padding-Darstellung ist hinsichtlich der Richtungen der Margin-Darstellung ähnlich. Wir können es wie folgt veranschaulichen.

margin: 20px 20px 20px 20px;

Der obige Code setzt die Auffüllung von 20px in alle Richtungen.

Lassen Sie uns nun die praktische Anwendung von CSS-Padding anhand eines Beispiels demonstrieren. Wir verwenden hier dieselbe HTML-Struktur wie oben. Wählen Sie in CSS das div aus und geben Sie Höhe und Breite von 200px und padding-top von 50px an. Wählen Sie die einzelnen Klassen aus und geben Sie ihnen den entsprechenden Wert für die Eigenschaft background-color.

Im Beispiel unten sind die beiden Kästchen angehängt, anders als im obigen Randbeispiel. Wir können jedoch in beiden Feldern über jedem Text etwas Platz sehen. Das ist die Aufgabe der Polsterung. Wenn Sie die Eigenschaft padding-top auf 20px setzen, wird Platz von 50px vom Text zum oberen Rand der Box hinzugefügt.

Beispielcode:

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

Wir können CSS-Padding verwenden, um den Abstand zwischen dem Inhalt eines Elements und seinem Rahmen anzugeben. Wir können auch Padding verwenden, um die Größe des Elements zu erhöhen. Wenn wir den Padding-Wert erhöhen, vergrößert sich der Abstand zwischen Inhalt und Rahmen. Dadurch erhöht sich auch die Größe des Elements, wodurch die Größe des Inhalts konstant bleibt.