logo

So fügen Sie Padding in HTML hinzu

Wenn wir mithilfe des internen CSS Innenabstände in das HTML-Dokument einfügen möchten, müssen wir die unten aufgeführten Schritte ausführen. Mit diesen einfachen Schritten können wir die Polsterung ganz einfach anbringen.

Schritt 1: Zuerst müssen wir den HTML-Code in einen beliebigen Texteditor eingeben oder die vorhandene HTML-Datei in dem Texteditor öffnen, in dem wir den Abstand hinzufügen möchten.

 Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding. 

Schritt 2: Jetzt müssen wir den Cursor im Head-Tag direkt nach dem Title-Tag des HTML-Dokuments platzieren und dann das definieren Tag wie im folgenden Block gezeigt.

 Add the Padding in Html 

Schritt 3: Jetzt müssen wir die Padding-Eigenschaft in dem ID-Selektor definieren, der direkt vor dem Text angegeben wird, zu dem wir Padding hinzufügen möchten.

Im Folgenden sind die fünf verschiedenen Eigenschaften aufgeführt, aus denen wir die Polsterung auf jeder Seite anbringen können:

Parallelverarbeitung

ich. Polsterung links:

Wenn wir auf ein Element nur die linke Polsterung anwenden möchten, müssen wir nur verwenden Polsterung links Eigenschaft im ID-Selektor. Und dann müssen wir nur noch einen Wert für die Eigenschaft festlegen, wie im folgenden Beispiel gezeigt:

 Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. 
Testen Sie es jetzt

Die Ausgabe des obigen Codes, der die padding-left-Eigenschaft verwendet, wird im folgenden Screenshot gezeigt:

So fügen Sie Padding in HTML hinzu

ii. Polsterung rechts:

Prioritätswarteschlange Java

Wenn wir einem Element nur die rechte Polsterung zuweisen möchten, müssen wir nur verwenden Polsterung-rechts Eigenschaft im ID-Selektor. Und dann müssen wir nur einen Wert für die Eigenschaft festlegen, wie im folgenden Beispiel gezeigt:

 Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. 
Testen Sie es jetzt

Die Ausgabe des obigen Codes, der die padding-right-Eigenschaft verwendet, wird im folgenden Screenshot gezeigt:

So fügen Sie Padding in HTML hinzu

iii. Polsterung oben:

Wenn wir nur die obere Polsterung auf ein Element anwenden möchten, müssen wir nur verwenden Polsterung oben Eigenschaft im ID-Selektor. Und dann müssen wir nur einen Wert für die Eigenschaft festlegen, wie im folgenden Beispiel gezeigt:

MySQL-Benutzer erstellen
 Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. 
Testen Sie es jetzt

Die Ausgabe des obigen Codes, der die Eigenschaft „padding-top“ verwendet, ist im folgenden Screenshot dargestellt:

So fügen Sie Padding in HTML hinzu

iv. Polsterung unten:

Wenn wir nur die untere Polsterung auf ein Element anwenden möchten, müssen wir nur verwenden Polsterung unten Eigenschaft im ID-Selektor. Und dann müssen wir nur einen Wert für die Eigenschaft festlegen, wie im folgenden Beispiel gezeigt:

 Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. 
Testen Sie es jetzt

Die Ausgabe des obigen Codes, der die Eigenschaft „padding-bottom“ verwendet, ist im folgenden Screenshot dargestellt:

So fügen Sie Padding in HTML hinzu

v. Polsterung:

Wenn wir die unterschiedliche Polsterung auf alle vier Seiten (oben, unten, links, rechts) anwenden möchten, müssen wir die vier Werte in der Polsterungseigenschaft angeben.

Textgröße Latex
 padding: 10px 50px 75px 200px; 

Wenn wir die beiden Werte angeben, wendet der HTML-Editor den ersten Abstand oben und unten und den zweiten Abstand links und rechts an.

 padding: 100px 50px; 

Wenn wir im Padding-Attribut nur einen Wert angeben, wendet der HTML-Editor den gleichen Abstand auf alle vier Seiten an.

ASCII eines in Java
 padding: 100px; 

Beispiele für Padding-Eigenschaften:

Beispiel 1: Im folgenden Beispiel wird ein Wert in der Eigenschaft „padding“ verwendet, um auf allen vier Seiten den gleichen Abstand festzulegen.

 Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. 
Testen Sie es jetzt

Die Ausgabe von Beispiel 1 ist im folgenden Screenshot dargestellt:

So fügen Sie Padding in HTML hinzu

Beispiel 2: Im folgenden Beispiel werden zwei Werte verwendet Polsterung Eigenschaft, um die gleiche Polsterung auf den gegenüberliegenden Seiten festzulegen.

 Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. 
Testen Sie es jetzt

Die Ausgabe von Beispiel 2 ist im folgenden Screenshot dargestellt:

So fügen Sie Padding in HTML hinzu

Beispiel 3: Im folgenden Beispiel werden vier Werte in der padding-Eigenschaft verwendet, um die unterschiedliche Polsterung für alle vier Seiten festzulegen.

 Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. 
Testen Sie es jetzt

Die Ausgabe von Beispiel 3 ist im folgenden Screenshot dargestellt:

So fügen Sie Padding in HTML hinzu