HTML -Polsterstil - CSS

HTML -Polsterstil - CSS

Das Cascading Style Sheet (CSS) bietet Hunderte von Styling -Eigenschaften für die HTML -Elemente. Zusammen mit den Dekorationsstilen bietet es auch Eigenschaften, um die Positionen und die Platzierung der Elemente auf der Webseite anzupassen. Diese Eigenschaften umfassen "schweben","Polsterung","Rand","Position", und viele mehr.

Dieser Beitrag wird abdecken:

  • Was ist das „Polster“ -Sach in CSS??
  • So geben Sie die Eigenschaft „Polsterung“ an?

Was ist das „Polster“ -Sach in CSS??

Der "PolsterungEigenschaft beschreibt den Abstand zwischen dem Inhalt eines Elements und seinem Rand. Insbesondere fügt diese Eigenschaft Platz innerhalb des Elements hinzu, während die “RandEigenschaft erzeugt Platz um das Element. Die Werte der Polstereigenschaft können in “gemessen werden“px","em","rem", oder mehr. Allerdings das “remIst die beste Einheit, die mit Margen- und Polstereigenschaften verwendet werden kann.

Voraussetzung: Erstellen Sie eine HTML -Datei

Um die Padding -Eigenschaft auf HTML -Elemente anzuwenden, müssen Benutzer die HTML -Datei erstellen. Verwenden Sie zu diesem Zweck die folgenden Schritte:

  • Füge hinzu ein ""Element und zuweisen Sie ihm eine Klasse"Hauptinhalt”.
  • Dann schließen Sie die “ein"Tag, um ein Bild zu platzieren und"

    Tag, um einen Text einzuschließen:



Das Licht der Bildung macht uns hell.


Lassen Sie uns in den CSS -Abschnitt gehen, um den Stil auf den Container anzuwenden.

Stil "Div" Element

Greifen Sie zunächst auf das "" "Element mit Klasse" zu ".Hauptinhalt”Und wenden Sie die folgenden Eigenschaften an:

.Hauptinhalt
Breite: 400px;
Rand: Auto;
Grenze: 5px Groove RGB (151, 151, 151);

Die Beschreibung der oben genannten Eigenschaften lautet wie folgt:

  • Breite”Bestimmt die Breite des Elements.
  • Rand”Definiert den Raum um das Element.
  • Grenze”Wendet den Rand um das Element um, indem die Werte für Grenzbreite, Stil und Farbe angegeben werden.

Die Ausgabe des oben bereitgestellten Codes wird unten dargestellt:

So geben Sie die Eigenschaft „Polsterung“ an?

In CSS “PolsterungEigenschaft hat einen Bereich von ein bis vier Werten. Befolgen Sie die aufgeführten Beispiele, um ein besseres Verständnis zu erhalten:

  • Beispiel 1: CSS -Eigenschaft „Polsterung“ mit einem Wert
  • Beispiel 2: CSS -Eigenschaft „Polsterung“ mit zwei Werten
  • Beispiel 3: CSS -Eigenschaft „Polsterung“ mit drei Werten
  • Beispiel 4: CSS -Eigenschaft „Polsterung“ mit vier Werten

Beispiel 1: CSS -Eigenschaft „Polsterung“ mit einem Wert

In CSS, wenn das “Polsterung”Eigenschaft wird ein Wert zugewiesen, fügt sie hinzu“1remPlatz auf jeder Seite des Inhalts des Elements:

Polsterung: 1Rem;

Ausgang

Beispiel 2: CSS -Eigenschaft „Polsterung“ mit zwei Werten

Der "PolsterungEigenschaft kann mit zwei Werten eingestellt werden, wobei:

  • Der "Erster Wert”Repräsentiert die Polsterung (Raum) an der oberen und unteren Seite.
  • Der "zweiter Wert”Repräsentiert den Raum auf der linken und rechten Seite des Inhalts des Elements:
Polsterung: 1Rem 2Rem;

Ausgang

Beispiel 3: CSS -Eigenschaft „Polsterung“ mit drei Werten

Das CSS “PolsterungEigenschaft kann mit den drei Werten eingestellt werden. Sie arbeiten wie folgt:

  • Der erste Wert zeigt die Polsterung oben an.
  • Der zweite Wert bedeutet die Polsterung an der linken und rechten Seite.
  • Der dritte Wert definiert die Polsterung am Ende des Inhalts des Elements:
Polsterung: 1rem 2rem 3rem;

Ausgang

Beispiel 4: CSS -Eigenschaft „Polsterung“ mit vier Werten

Der "PolsterungDie Eigenschaft mit vier Werten passt den angegebenen Raum zwischen dem Inhalt und dem Rand von allen Seiten an, wie nachstehend beschrieben:

  • Erster Wert”Fügt oben Polsterung hinzu.
  • Zweiter Wert”Fügt auf der rechten Seite Polster hinzu.
  • Dritter Wert”Fügt die Polsterung unten hinzu.
  • Viertes Wert”Fügt auf der linken Seite die Polsterung hinzu:
Polsterung: 2REM 3REM 1REM 2REM;

Ausgang

Wir haben auf HTML -Polsterstilen mit unterschiedlichen Werten unter Verwendung von CSS ausgearbeitet.

Abschluss

Das CSS “PolsterungEigenschaft erhöht die Entfernung um den Inhalt des Elements. Es hat einen Wertbereich von eins bis vier. “Ein Wert”Bedeutet auf jeder Seite des Elementinhalts dieselbe Polsterung. “Zwei WerteDefinieren Sie den Raum am oberen Bottom und an den rechts linken Seiten. “Drei WerteSetzen Sie die Polsterung oben, nach links rechts und unteren Seiten des Inhalts des Elements. “Vier WerteGeben Sie die eindeutige Polsterung auf jeder Seite an. Dieser Beitrag hat den HTML -Polsterstil in CSS gezeigt.