Wie erstelle ich Polsterung in CSS?

Mit CSS -Polsterung kann ein HTML -Codierer die Standardpolsterung oder den toten Raum außerhalb eines HTML -Elements einstellen.Der Vorteil davon besteht darin, dass er den Coder daran hindert, diesen Polstercode für jede Instanz dieses Elements zu wiederholen und auf der Seite leichter Konsistenz zu erzeugen.Das zu gepolsterte HTML -Element kann eine beliebige Anzahl von Dingen sein, wie z. B. ein Absatz, eine Tabelle oder eine Überschrift.

Um Polsterung in CSS zu erstellen, müssen Sie zuerst das HTML -Element identifizieren, das Sie polieren möchten.Dieses Element, das Sie polieren möchten, ist als Selektor bekannt.Dann möchten Sie die entsprechenden Polsterwerte angeben.Es gibt fünf verschiedene Arten von Polstereigenschaften in CSS Mdash.Eine für alle vier Seiten eines Elements gleichzeitig und vier andere für jede einzelne Seite des Elements (z. B. die linke Seite, die rechte Seite, die Oberseite oder die untere Seite).Eine Eigenschaft, die es dem Programmierer ermöglicht, Werte für alle vier Seiten eines HTML -Elements gleichzeitig anzugeben, wird als Shorthand -Eigenschaft bezeichnet.

Die Codierungssprache, mit der eine Deklaration der CSS -Polsterung angegeben wurde, ist einfach das Wort „Polsterung“.Nach diesem Etikett finden Sie die relevanten Werte der Polsterung oder Informationen über die gewünschte Menge an Platz, die normalerweise entweder durch Pixel oder einen Prozentsatz dargestellt werden.Die Polsterung und die Werte werden in lockigen Klammern oder lockigen Klammern geschrieben (d. H. {und}).Vor all dem ist das zu gepolsterte HTML -Element (z. B. P für den Absatz oder H2 für Level 2 -Header).

In Bezug auf die Darstellung des Wertes können Werte in Pixel dargestellt werden (z., Punkte (z. B. 1pt oder 5pt) oder Zoll (z. B. 1 Zoll oder 5 Zoll) oder Zentimeter (z. B. 1 cm oder 5 cm).Werte können auch als Prozentsatz des zu beobachteten HTML -Elements deklariert werden.Wenn der Wert beispielsweise 50%beträgt, entspricht die Polsterung die Hälfte der Größe des Elements.

Die folgenden Beispiele sind der HTML -Code für die Polsterung eines HTML -Elements durch Werte, die sich in Prozent und Länge widerspiegeln.Wenn nur ein Wert zugewiesen wird, werden Webbrowser alle vier Seiten des HTML -Elements diese Polsterung zuweisen.

Polsterung: 10%;

Polsterung: 100px;

Hinzufügen weiterer Werte zur Art der oben genannten Polsterdeklaration veranlasst Webbrowser, sie auf eine bestimmte Weise zu interpretieren.Wenn zwei Werte zugewiesen werden, entspricht der erste der oberen und unten, während die zweite links und rechts entspricht.Drei Werte beziehen sich auf die Oberseite, die zweite zum linken und rechten Seiten und die dritte am unteren Rand des HTML -Elements.Durch das Zuweisen der maximal vier Werte entspricht die ersten, zweiten, dritten und vierten Werte in dieser Reihenfolge den oberen, rechten, unten und links vom HTML -Element.Wenn mehr als ein Wert bereitgestellt wird, sollten sie durch Leerzeichen getrennt und mit einem Halbkolon enden, z.In dieser Hinsicht sind vier weitere Polstereigenschaften verfügbar.Dies sind Padding-Tops, Polsterrechte, Polsterboden und Padding-Links.Um auf diese Weise eine Polsterung in CSS zu erstellen, müssen Sie die Eigenschaften mit derselben Syntax wie die oben genannten Abkürzungen kennzeichnen.Jede dieser Polstereigenschaften nimmt nur einen Wert in Länge oder Prozentsatz an.Zum Beispiel:

Padding-Top: 10px;

Padding-Recht: 20px;

Padding-Bottom: 10px;

Padding-Links: 20px;

Der folgende Code erstellt eine Webseite, deklariert die Polstereigenschaften zwischen Style-Tags und deklariertVerwendet sie dann in einem vom P -Tag angegebenen Absatzelement.Der Text zwischen dem/ * und den */sind Anmerkungen zur Erklärung der Art der verwendeten Polsterung und würden nicht im CSS -Padding -Code enthalten.
p.example1 {padding: 10px;} /* Short-Hand-Polster für alle vier Seiten* /
P.example2 {Padding: 50px 30px;} /* Short-Hand-Polster für die obere und untenund rechts * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
padding-links: 20px;
} / * individuelle Polsterung.*/
lt;/style gt;
lt;/head gt;

lt; body gt;Die Polsterung auf jeder Seite beträgt 10px.' ”Beispiel3” gt; Dieser Text hat eine obere Polsterung von 10px, eine rechte Polsterung von 20px, eine untere Polsterung von 10px und eine linke Polsterung von 20px.;

im obigen Beispiel „Beispiel1“ usw. sind Namen, die einer Klasse zugeordnet sind, auf die dann in den Absätzen verwiesen wird.Der Zeitraum zwischen dem P -Tag und den Klassennamen zu Beginn des Codes bezeichnet eine Erklärung einer Klasse, die einem Absatz zugewiesen ist.Beachten Sie die Zahnspangen nach der Klassenerklärung, in der die Zuordnungen des Padding -Eigenschaftswertes eingeschlossen sind.

Obwohl dies wie viel Arbeit erscheinen mag, ist es weitaus weniger arbeitsintensiv als die Angabe von Polster für jeden einzelnen Absatz.Sie können eine Polstereigenschaft für das gewünschte Element deklarieren, das im obigen Beispiel das P -Tag ist, und dann auf die Klasse verweisen, wenn Sie das Element zwischen den Körper Tags der Seite verwenden.Wenn für alle Absätze nur eine Polstertyp benötigt wird, müssen Sie überhaupt keine Klassen verwenden.Verwenden Sie einfach den folgenden Code zwischen den Style -Tags und codieren Sie dann die Absätze, ohne eine Klasse anzugeben.Dieser Code würde im obigen Beispiel zwischen den Body -Tags anstelle des Codes gehen.