Pokud chceme přidat odsazení do Html dokumentu pomocí Internal CSS , pak musíme postupovat podle kroků, které jsou uvedeny níže. Pomocí těchto jednoduchých kroků můžeme výplň snadno přidat.

Krok 1: Nejprve musíme zadat Html kód v libovolném textovém editoru nebo otevřít existující Html soubor v textovém editoru, do kterého chceme přidat výplň.

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

Krok 2: Nyní musíme umístit kurzor do značky head hned za značku title dokumentu Html a poté definovat tag, jak je znázorněno v následujícím bloku.

 Add the Padding in Html 

Krok 3: Nyní musíme definovat vlastnost padding v tom selektoru id, který je specifikován těsně před textem, na který chceme přidat padding.

Následuje pět různých vlastností, ze kterých můžeme použít výplň na každé straně:

css seznamy

i. Polstrování vlevo:

Pokud chceme na prvek použít pouze levé odsazení, pak musíme použít pouze polstrování-vlevo vlastnost v selektoru id. A pak musíme vlastnosti nastavit pouze jednu hodnotu, jak je znázorněno v následujícím příkladu:

 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. 

Výstup výše uvedeného kódu, který používá vlastnost padding-left, je zobrazen na následujícím snímku obrazovky:

ii. Výplň vpravo:

Pokud chceme na prvek aplikovat pouze správné odsazení, pak musíme použít pouze vycpávka-vpravo vlastnost v selektoru id. A pak musíme vlastnosti nastavit pouze jednu hodnotu, jak je znázorněno v následujícím příkladu:

 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. 

Výstup výše uvedeného kódu, který používá vlastnost padding-right, je zobrazen na následujícím snímku obrazovky:

iii. Horní polstrování:

Pokud chceme na prvek použít pouze horní výplň, musíme použít pouze polstrování-top vlastnost v selektoru id. A pak musíme vlastnosti nastavit pouze jednu hodnotu, jak je znázorněno v následujícím příkladu:

 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. 

Výstup výše uvedeného kódu, který používá vlastnost padding-top, je zobrazen na následujícím snímku obrazovky:

iv. Polstrování dna:

Pokud chceme na prvek použít pouze spodní výplň, musíme použít pouze vycpávka-dno vlastnost v selektoru id. A pak musíme vlastnosti nastavit pouze jednu hodnotu, jak je znázorněno v následujícím příkladu:

 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. 

Výstup výše uvedeného kódu, který používá vlastnost padding-bottom, je zobrazen na následujícím snímku obrazovky:

v. Výplň:

Pokud chceme použít různé výplně na všechny čtyři strany (nahoře, dole, vlevo, vpravo), musíme zadat čtyři hodnoty ve vlastnosti padding.

 padding: 10px 50px 75px 200px; 

Pokud uvedeme dvě hodnoty, pak Html editor použije první výplň nahoře a dole a druhou výplň vlevo a vpravo.

 padding: 100px 50px; 

Pokud v atributu padding zadáme pouze hodnotu, pak Html editor aplikuje stejnou výplň na všechny čtyři strany.

 padding: 100px; 

Příklady vlastností výplně:

Příklad 1: Následující příklad používá jednu hodnotu ve vlastnosti padding k nastavení stejného odsazení na všech čtyřech stranách.

 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. 

Výstup příkladu 1 je zobrazen na následujícím snímku obrazovky:

Příklad 2: Následující příklad používá dvě hodnoty v vycpávka vlastnost pro nastavení stejné výplně na opačné strany.

 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. 

Výstup z příkladu 2 je zobrazen na následujícím snímku obrazovky:

Příklad 3: Následující příklad používá čtyři hodnoty ve vlastnosti padding k nastavení různého odsazení na všechny čtyři strany.

 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. 

Výstup z příkladu 3 je zobrazen na následujícím snímku obrazovky: