Wie erstelle ich Polsterung in CSS?

CSS -Polsterung ermöglicht es einem HTML -Codierer, die Standardpolsterung oder den toten Raum außerhalb eines HTML -Elements festzulegen. Der Vorteil davon besteht darin, dass der Codierer diesen Polstercode für jede Instanz dieses Elements wiederholt und leichter Konsistenz auf der Seite erstellt. 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 zunächst das HTML -Element identifizieren, das Sie polieren möchten. Dieses Element, das Sie polieren möchten, ist als Selektor bekannt. Anschließend möchten Sie die entsprechenden Polsterwerte angeben. In CSS gibt es fünf verschiedene Arten von Polstereigenschaften - 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 eine 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 steht 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 Pixeln (z. B. 1px oder 5px), Punkten (z. B. 1PT oder 5pt) oder Zoll (z. B. 1in oder 5in) oder Zentimetern (z. B. 1 cm oder 5 cm) dargestellt werden. Die 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 das Polsterung eines HTML -Element über 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 von mehr Werten zu der Art der obigen 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 nach links und rechts 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 der oberen, rechten, unten und linken Seite des HTML -Elements. Wenn mehr als ein Wert bereitgestellt wird, sollten sie durch Leerzeichen getrennt und mit einem Semikolon endeten:

Polsterung: 10px 20px 10px 20px;

Polsterung in CSS kann auf einer Seite durchgeführt werdeneine Zeit auch. 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 Kurzerklärungen kennzeichnen. Jede dieser Polstereigenschaften nimmt nur einen Wert in Länge oder Prozentsatz an. Zum Beispiel:

Padding-Top: 10px;
Padding-Right: 20px;
Padding-Bottom: 10px;
Padding-Links: 20px;

Der folgende Code erstellt eine Webseite, deklariert die Polstereigenschaften zwischen Stiletiks und verwendet 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.

Dieser Text hat die gleiche Polsterung auf jeder Seite. Die Polsterung auf jeder Seite beträgt 10px.

Dieser Text hat eine obere und untere Polsterung von 50px und eine linke und rechte Polsterung von 30px.

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 Code bezeichnet eine Erklärung einer Klasse, die einem Absatz zugewiesen ist. Beachten Sie die Zahnspangen nach dem KlassenklarEinschließt die Zuordnungen für den Wert von Padding -Eigenschaften.

Obwohl dies eine Menge Arbeit erscheinen mag, ist es weitaus weniger arbeitsintensiv als die Angabe von Polsterung 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.

p {padding: 10px 20px 10px 20px;}

Diese CSS -Polsterung, die dies erzeugen würde, würde alle Absätze beeinflussen, obwohl keine Klasse angegeben war.