Polstereigentum in CSS erklärt

Polsterung ist die Eigenschaft, die zum Erstellen von Platz um den Inhalt des Elements (innerhalb des Randes) verwendet wird. Ein Element hat vier Seiten, und die Padding -Eigenschaft ermöglicht es Ihnen, Platz auf einer bestimmten Seite zu erzeugen. Darüber hinaus können Sie mit der Padding Shorthand -Eigenschaft gleichzeitig Platz um mehrere Seiten schaffen.

Die Polsterung und Ränder sind miteinander verbundene Phänomene, da beide Eigenschaften dazu neigen, Platz um die Elemente zu schaffen. Der Unterschied besteht jedoch darin, dass die Polsterung Platz innerhalb von Grenzen schafft, und der Margin summiert sich außerhalb des Grenze Platz. Dieser informative Beitrag beschreibt die Arbeit und Verwendung von Polstereigentum in CSS.

Wie das Polstereigentum in CSS funktioniert

Der Hauptzweck der Polstermobil. Die Polsterung kann auf eine der folgenden Arten verwendet werden:

Verwenden von Padding -Eigenschaften auf den Seiten einzeln

Die Polsterung kann an einzelne Seiten gegeben werden, indem die folgende Syntax ausgestellt wird:

Selector padding-top: value; // auf der oberen Seite
Selector Padding-Light: Value; // auf der rechten Seite
Selector Padding-Bottom: Value; // auf der unteren Seite
Selector padding-links: value; // auf der linken Seite

Die Instanzen der obigen Syntax werden nachstehend beschrieben:

• Der Selector ist ein Element oder kann sich auf die CSS -Klasse beziehen
• Die Polstertope, die Polsterrechte, der Polsterboden und die Padding-Links stellen die Polsterseite dar
• Der Wert definiert den Speicherplatz, der bereitgestellt wird, und der Wert kann eine Messeinheit i haben.e., Länge (PX, CM, REM, EM), %(Prozentsatz nach dem Element), auto (wie vom Browser definiert).

Notiz: Die in PX gemessenen Werte sind absolut (fest), während die Werte in %, REM und EM zur Reaktionsfähigkeit verwendet werden und automatisch angepasst werden.

Verwenden von Padding Shorthand -Eigentum

Die Padding Shorthand -Eigenschaft kann verwendet werden, um verschiedenen Seiten gleichzeitig Platz zu verleihen. Die folgende Syntax wird unter Verwendung der Padding Shorthand -Immobilie in CSS praktiziert.

Selector Padding: Value1 Value2 Value3 Value4;

In der obigen Syntax repräsentiert der Wert 1, Wert2, Wert3 und Wert4 die obere, rechte, unten und linke Seite des Elements.

So verwenden Sie Padding -Immobilien in CSS

Dieser Abschnitt umfasst verschiedene Beispiele, die die Verwendung von Polstereigentum in CSS definieren.

Beispiel 1: Verwenden von Padding -Eigenschaften auf einzelnen Seiten
Der folgende Code übt die Padding -Eigenschaft auf allen Seiten einzeln aus.

Padding -Eigentum in CSS

Verwenden der Polsterung in PX

Verwenden des Polsterrechts in EM

Verwenden des Polsterbodens in %

Verwenden der Polsterlinks in PX

Die Beschreibung des Code ist unten angegeben

• Die Breite aller Absätze wäre „fit-in-in-In-Inhalt“, um das Verständnis der Polsterung besser zu verstehen
• Vier CSS-Klassen, die als "Top", "Rig", "Bot" und "LEF" bezeichnet werden
• Die Klassen „Top“ und „LEF“ verwenden die „PX“ als Messeinheit für das Polsterung, bei dem als „Rig“ und „Bot“ -Klassen „EM“ und „%“ als Messeinheit für die Polsterung üben
• Die vier Absätze verwenden die CSS -Klassen, um die Polsterung auf diesen Absätzen zu implementieren

Das Bild des Code wird hier angezeigt

Ausgang

Beispiel 2: Verwenden von Padding -Eigenschaften auf mehreren Seiten gleichzeitig
Mit der Padding Shorthand -Eigenschaft können Sie mehrere Seiten gleichzeitig Polster hinzufügen und hier werden sie mit dem folgenden Code praktiziert.

Padding -Eigentum in CSS

Verwenden der Polsterung in PX

Verwenden von Polsterung 3% nach oben/unten und 6% links/rechts

Verwenden Sie mit Polsterung 2EM nach oben/unten und 3em nach rechts/links

Verwenden der Polsterung 5px zu allen Seiten

Überspringen der Polstermobilie auf der linken Seite

Die Beschreibung des Code ist unten bereitgestellt

• Definierte verschiedene Stile wie Hintergrundfarbe, Breite und Grenzstil für alle Absätze
• Fünf CSS -Klassen werden benannt "All", "Trio", "Duo", "Nano" und "Skip".
• Die Klasse "All" erlaubt es, allen Seiten unterschiedliche Polsterwerte hinzuzufügen
• Die „Trio“ -Klasse fügt den Padding -Wert zu 3% zu oben/unten und 6% nach rechts/links hinzu
• Die Klasse „Duo“ erlaubt die Padding -Eigenschaft oben/unten von 2EM und rechts/links von 3EM
• Der „Nano“ fügt allen Seiten den Padding -Wert 5px hinzu
• Die "Skip" -Klasse fügt den drei Seiten die Polsterung hinzu und würde die linke Seite (da sein Wert in der oben genannten CSS -Klasse 0 beträgt) auf die Seiten überspringen.

Notiz: Abgesehen davon, dass die Polsterung auf der linken Seite überspringt, kann jede andere Seite übersprungen werden, indem 0 Wert auf der Stelle verwendet wird.

Das Bild des Code ist unten angezeigt

Ausgang

Aus der obigen Ausgabe kann das Konzept der Polstermobilie in verschiedenen Szenarien erhalten werden.

Die obigen Beispiele ermöglichen es Ihnen, die Funktionalität der Polsterung in den folgenden Kontexten zu lernen:

• Verwenden Sie die Padding -Eigenschaft auf jeder Seite einzeln
• Verwenden von Padding -Eigenschaften mit verschiedenen Messwerten (PX, % und EM)
• Verwenden Sie die Padding -Shorthand -Eigenschaft, um Polsterung auf mehreren Seiten gleichzeitig hinzuzufügen oder eine Seite zu überspringen

Abschluss

Die Polsterung ist die Eigenschaft, mit der Platz um ein Element rund um ein Element erstellt wird. Die Polsterung kann einzelne Seiten mithilfe, Padding, Polsterrechte, Polsterboden und Padding-Links zur Verfügung gestellt werden. Dieser informative Beitrag erleuchtet den Arbeitsmechanismus und die Verwendung von Polstereigentum in CSS. Darüber hinaus haben wir Tipps zur Arbeit an der Padding-Shorthand-Eigenschaft gegeben, die den kombinierten Effekt von Polstertop/rechts/unten/links enthält und gleichzeitig auf mehreren Seiten angewendet wird.