Dieser Beitrag beschreibt:
- Wann sollte man „Padding“ vs. „Margin“ in CSS verwenden?
- Wie nutzt man „Rand“ in CSS?
- Wie nutzt man „Padding“ in CSS?
Wann sollte man „Padding“ vs. „Margin“ in CSS verwenden?
CSS“ Gewinnspanne ' und ' Polsterung ”-Eigenschaften werden verwendet, um die Schnittstelle zu gestalten. Sie werden auch verwendet, um die zusätzliche Lücke oder den Zwischenraum zwischen Elementen anzugeben. Diese beiden Eigenschaften unterscheiden sich jedoch in der Funktionalität.
Hier erklären wir einige Unterschiede zwischen beiden Eigenschaften:
| Gewinnspanne | Polsterung |
|---|---|
| margin bietet Platz außerhalb des Elements. | padding bietet Platz innerhalb des Inhalts des Elements. |
| Wir können einen Elementrand festlegen als „ Auto “, um automatisch den Rand um das Element festzulegen. | padding kann nicht auf auto gesetzt werden. Der Benutzer muss die Werte angeben, um den Abstand innerhalb des Elements festzulegen. |
| Der Rand hat den Stil eines Elements nicht beeinflusst. | Wenn wir dem Element eine Hintergrundfarbe zuweisen, wirkt sich dies auf das Styling eines Elements aus. |
| Als Margen können wir sowohl positive als auch negative Werte einstellen. | padding unterstützt nur positive Werte. |
Wie nutzt man „Rand“ in CSS?
Zur Nutzung des „ Gewinnspanne ” Eigenschaft erstellen Sie zuerst eine “ Das Ergebnis des oben genannten Codes ist unten erwähnt: Erstellen Sie jetzt ein weiteres ' Ausgabe Wenden Sie nun die Eigenschaft „margin“ auf die Klasse „.margin-div“ an: Im obigen Code ist das „ .margin-div “ wird für den Zugriff auf das div-Element verwendet, um die unten aufgeführten Eigenschaften anzuwenden: Hier können Sie sehen, dass wir das „ Gewinnspanne „Grundstück am zweiten“ div ' Element: Um die 'Padding'-Eigenschaft zu nutzen, wurden die oben genannten Beispiele verwendet. In dieser Sekunde ' div ” Container, verwenden Sie die Klasse “ padding-div ” um eine Polsterung anzuwenden: Ausgabe So wenden Sie Padding und andere CSS-Eigenschaften auf „ .padding-div ” Klasse, sehen Sie sich den bereitgestellten Code an: Im oben genannten Code haben wir auf den zweiten „ div „Element mit Klasse“ .padding-div “. Wir haben die „Hintergrundfarbe“ und „Schriftgröße“ eingestellt. Außerdem ist die „ Polsterung ”-Eigenschaft wird verwendet, um den Elementinhalt von jeder Seite als “ 50px “. Ausgabe Wir haben die Unterschiede und Verwendungen von „Padding“ und „Margin“ in CSS erklärt. Das CSS „ Gewinnspanne “ wird verwendet, um den Abstand um das Element herum festzulegen, während „ Polsterung “ wird verwendet, um einen Abstand um den Elementinhalt hinzuzufügen. Um die Rand- oder Polsterungseigenschaft anzuwenden, erstellen Sie zuerst ein „ div ”-Container und geben Sie die Klasse an. Greifen Sie danach über den Klassennamen auf die Klasse zu und wenden Sie die „ Gewinnspanne ' und ' Polsterung ' Eigenschaften. Dieser Beitrag hat die Verwendung von Margin vs. Padding in CSS erklärt.
< div Klasse = 'Linux' >
< p > Linuxhint ist eine der besten Tutorial-Websites < / p >
< / div >
< div Klasse = 'margin-div' Stil = 'Rand: 1px durchgehend schwarz' >
< p >Linuxhint ist eine der besten Tutorial-Websites.< Br >
< / p >
< div >
Hintergrund- Farbe : RGB ( 199 , 238 , 205 ) ;
Schriftart- Größe : Mittel;
Grenze : 3px RGB ( 114 , 250 , 114 ) ;
Rand: 100px 100px 100px 100px;
}
Wie nutzt man „Padding“ in CSS?
< p > Linuxhint ist eine der besten Tutorial-Websites < / p >
< / div >
< div Klasse = 'padding-div' Stil = 'Rand: 1px durchgehend schwarz' >
< p >Linuxhint ist eine der besten Tutorial-Websites.< Br >
< / p >
< / div >
Hintergrund- Farbe : RGB ( 199 , 238 , 205 ) ;
Schriftart- Größe : Mittel;
Polsterung: 50px 50px 50px 50px;
}
Fazit