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.Testirajte sada
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.Testirajte sada
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.Testirajte sada
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.Testirajte sada
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.Testirajte sada
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.Testirajte sada
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.Testirajte sada
Izlaz primjera 3 prikazan je na sljedećoj snimci zaslona: