TechCodeview

Ako želimo dodati ispunu u Html dokument koristeći interni CSS, tada moramo slijediti korake koji su navedeni u nastavku. Pomoću ovih jednostavnih koraka možemo jednostavno dodati ispunu.

Korak 1: Prvo, moramo utipkati Html kod u bilo kojem uređivaču teksta ili otvoriti postojeću Html datoteku u uređivaču teksta u koji želimo dodati padding.

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

Korak 2: Sada moramo postaviti kursor u oznaku head neposredno nakon oznake naslova Html dokumenta i zatim definirati oznaku kao što je prikazano u sljedećem bloku.

 Add the Padding in Html 

Korak 3: Sada moramo definirati svojstvo padding u tom id selektoru koji je naveden neposredno prije teksta na koji želimo dodati padding.

Slijedi pet različitih svojstava iz kojih možemo primijeniti podstavu na svakoj strani:

niz bajtova u niz

ja Padding-lijevo:

Ako želimo primijeniti samo lijevo padding na element, tada moramo koristiti only padding-lijevo svojstvo u selektoru id-a. I tada moramo postaviti samo jednu vrijednost svojstva kao što je prikazano u sljedećem primjeru:

 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. 

Izlaz gornjeg koda koji koristi svojstvo padding-left prikazan je na sljedećoj snimci zaslona:

ii. Padding-desno:

Ako na element želimo primijeniti samo desno ispunjavanje, tada moramo koristiti samo padding-desno svojstvo u selektoru id-a. I tada moramo postaviti samo jednu vrijednost svojstva kao što je prikazano u sljedećem primjeru:

 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. 

Izlaz gornjeg koda koji koristi svojstvo padding-right prikazan je na sljedećoj snimci zaslona:

iii. Podstava na vrhu:

Ako na element želimo primijeniti samo gornji sloj, tada moramo koristiti samo padding-top svojstvo u selektoru id-a. I tada moramo postaviti samo jednu vrijednost svojstva kao što je prikazano u sljedećem primjeru:

 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. 

Izlaz gornjeg koda koji koristi svojstvo padding-top prikazan je na sljedećoj snimci zaslona:

iv. Donja podloga:

Ako na element želimo primijeniti samo donju podlogu, tada moramo koristiti samo padding-bottom svojstvo u selektoru id-a. I tada moramo postaviti samo jednu vrijednost svojstva kao što je prikazano u sljedećem primjeru:

 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. 

Izlaz gornjeg koda koji koristi svojstvo padding-bottom prikazan je na sljedećoj snimci zaslona:

v. Padding:

Ako želimo primijeniti različite ispune na sve četiri strane (gornja, donja, lijeva, desna), tada moramo navesti četiri vrijednosti u svojstvu ispune.

 padding: 10px 50px 75px 200px; 

Ako navedemo dvije vrijednosti, tada Html editor primjenjuje prvo ispunjavanje na vrh i dno, a drugo ispunjavanje na lijevo i desno.

sortiranje spajanjem

 padding: 100px 50px; 

Ako navedemo samo vrijednost u atributu padding, tada Html editor primjenjuje isti padding na sve četiri strane.

 padding: 100px; 

Primjeri svojstava padding:

Primjer 1: Sljedeći primjer koristi jednu vrijednost u svojstvu ispune za postavljanje iste ispune na sve četiri strane.

 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. 

Izlaz primjera 1 prikazan je na sljedećoj snimci zaslona:

Primjer 2: Sljedeći primjer koristi dvije vrijednosti u podstava svojstvo za postavljanje istog ispuna na suprotne strane.

 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. 

Izlaz primjera 2 prikazan je na sljedećoj snimci zaslona:

Primjer 3: Sljedeći primjer koristi četiri vrijednosti u svojstvu padding za postavljanje različitih ispuna na sve četiri strane.

 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. 

Izlaz primjera 3 prikazan je na sljedećoj snimci zaslona: