Jei norime pridėti užpildymą HTML dokumente naudodami vidinį CSS , turime atlikti toliau nurodytus veiksmus. Naudodami šiuos paprastus veiksmus galime lengvai pridėti užpildą.

1 žingsnis: Pirmiausia turime įvesti HTML kodą bet kuriame teksto rengyklėje arba atidaryti esamą HTML failą teksto rengyklėje, kurioje norime pridėti užpildą.

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

2 žingsnis: Dabar turime įdėti žymeklį į galvos žymą iškart po HTML dokumento pavadinimo žymos ir tada apibrėžti žymą, kaip parodyta kitame bloke.

 Add the Padding in Html 

3 veiksmas: Dabar turime apibrėžti užpildymo savybę tame ID parinkiklyje, kuris yra nurodytas prieš pat tekstą, prie kurio norime pridėti užpildymą.

Toliau pateikiamos penkios skirtingos savybės, iš kurių galime pritaikyti paminkštinimą kiekvienoje pusėje:

i. Pamušalas kairėje:

Jei norime elementui taikyti tik kairįjį užpildymą, turime naudoti tik kamšalas-kairėje ypatybę ID parinkiklyje. Ir tada turime nustatyti tik vieną nuosavybės vertę, kaip parodyta šiame pavyzdyje:

 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. 

Aukščiau pateikto kodo, kuris naudoja ypatybę „padding-left“, išvestis rodoma šioje ekrano kopijoje:

ii. Pamušalas dešinėje:

Jei norime elementui pritaikyti tik tinkamą užpildą, turime naudoti tik pamušalas-dešinė ypatybę ID parinkiklyje. Ir tada turime nustatyti tik vieną nuosavybės vertę, kaip parodyta šiame pavyzdyje:

 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. 

Aukščiau pateikto kodo, kuriame naudojama užpildymo teisė, išvestis rodoma šioje ekrano kopijoje:

iii. Viršutinis pamušalas:

Jei norime elementui pritaikyti tik viršutinį užpildą, turime naudoti tik kamšalas-viršus ypatybę ID parinkiklyje. Ir tada turime nustatyti tik vieną nuosavybės vertę, kaip parodyta šiame pavyzdyje:

 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. 

Aukščiau pateikto kodo, naudojančio užpildymo viršutinę ypatybę, išvestis rodoma šioje ekrano kopijoje:

iv. Paminkštinimas apačioje:

Jei norime elementui pritaikyti tik apatinį užpildą, turime naudoti tik paminkštinimas-dugnas ypatybę ID parinkiklyje. Ir tada turime nustatyti tik vieną nuosavybės vertę, kaip parodyta šiame pavyzdyje:

 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. 

Aukščiau pateikto kodo, kuris naudoja ypatybę „padding-bottom“, išvestis rodoma šioje ekrano kopijoje:

v. Padding:

Jei norime taikyti skirtingą užpildymą visoms keturioms pusėms (viršuje, apačioje, kairėje, dešinėje), užpildymo ypatybėje turime nurodyti keturias reikšmes.

 padding: 10px 50px 75px 200px; 

Jei nurodysime dvi reikšmes, HTML redaktorius taikys pirmąjį užpildymą viršuje ir apačioje, o antrąjį užpildymą kairėje ir dešinėje.

 padding: 100px 50px; 

Jei užpildymo atribute nurodysime tik reikšmę, HTML redaktorius taikys tą patį užpildymą visoms keturioms pusėms.

 padding: 100px; 

Paminkštinimo savybių pavyzdžiai:

1 pavyzdys: Šiame pavyzdyje užpildymo ypatybėje naudojama viena reikšmė, kad būtų nustatytas tas pats užpildymas visoms keturioms pusėms.

 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. 

1 pavyzdžio išvestis parodyta šioje ekrano kopijoje:

regex java

2 pavyzdys: Toliau pateiktame pavyzdyje naudojamos dvi reikšmės kamšalas savybę nustatyti tą patį užpildą priešingose ​​pusėse.

 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. 

2 pavyzdžio išvestis parodyta šioje ekrano kopijoje:

3 pavyzdys: Šiame pavyzdyje naudojamos keturios užpildymo ypatybės reikšmės, kad būtų galima nustatyti skirtingą užpildymą visose keturiose pusėse.

 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. 

3 pavyzdžio išvestis parodyta šioje ekrano kopijoje: