Jos haluamme lisätä täyttöä HTML-dokumenttiin käyttämällä sisäistä CSS:ää, meidän on noudatettava alla annettuja ohjeita. Näiden yksinkertaisten vaiheiden avulla voimme helposti lisätä pehmusteen.

Vaihe 1: Ensinnäkin meidän on kirjoitettava HTML-koodi mihin tahansa tekstieditoriin tai avattava olemassa oleva HTML-tiedosto tekstieditorissa, johon haluamme lisätä täytteen.

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

Vaihe 2: Nyt meidän on asetettava kohdistin head-tunnisteeseen heti HTML-dokumentin otsikkotunnisteen jälkeen ja määritettävä sitten -tunniste seuraavan lohkon osoittamalla tavalla.

 Add the Padding in Html 

Vaihe 3: Nyt meidän on määriteltävä täytön ominaisuus siinä id-valitsimessa, joka on määritetty juuri ennen tekstiä, johon haluamme lisätä täytön.

Seuraavassa on viisi erilaista ominaisuutta, joista voimme lisätä pehmusteen kummallekin puolelle:

i. Täyte-vasen:

Jos haluamme käyttää elementtiin vain vasenta täyttöä, meidän on käytettävä vain pehmuste-vasen ominaisuus id-valitsimessa. Ja sitten meidän on asetettava ominaisuudelle vain yksi arvo seuraavan esimerkin mukaisesti:

 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. 

Yllä olevan koodin tulos, joka käyttää täyttövasen -ominaisuutta, näkyy seuraavassa kuvakaappauksessa:

ii. Täyte-oikea:

Jos haluamme käyttää elementtiin vain oikeaa täyttöä, meidän on käytettävä vain pehmuste-oikea ominaisuus id-valitsimessa. Ja sitten meidän on asetettava ominaisuudelle vain yksi arvo seuraavan esimerkin mukaisesti:

 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. 

Yllä olevan koodin tulos, joka käyttää täyttö-oikeus-ominaisuutta, näkyy seuraavassa kuvakaappauksessa:

iii. Pehmuste toppi:

Jos haluamme käyttää vain yläpehmustetta elementtiin, meidän on käytettävä vain pehmuste-top ominaisuus id-valitsimessa. Ja sitten meidän on asetettava ominaisuudelle vain yksi arvo seuraavan esimerkin mukaisesti:

puukartta

 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. 

Yllä olevan koodin tulos, joka käyttää täyttö-ominaisuutta, näkyy seuraavassa kuvakaappauksessa:

iv. Pehmuste pohja:

java vertailumenetelmä

Jos haluamme käyttää elementtiin vain pohjapehmustetta, meidän on käytettävä vain pehmuste-pohja ominaisuus id-valitsimessa. Ja sitten meidän on asetettava ominaisuudelle vain yksi arvo seuraavan esimerkin mukaisesti:

 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. 

Yllä olevan koodin tulos, joka käyttää täyttö-pohja-ominaisuutta, näkyy seuraavassa kuvakaappauksessa:

v. Täyte:

Jos haluamme käyttää erilaista täytetystä kaikille neljälle sivulle (ylä, ala, vasen, oikea), meidän on määritettävä neljä arvoa täyteominaisuuteen.

 padding: 10px 50px 75px 200px; 

Jos määritämme kaksi arvoa, HTML-editori käyttää ensimmäistä täytetystä ylä- ja alaosaan ja toista täytetystä vasemmalle ja oikealle.

 padding: 100px 50px; 

Jos määritämme vain arvon täyteattribuutissa, HTML-editori käyttää samaa täytetystä kaikille neljälle sivulle.

 padding: 100px; 

Esimerkkejä täyteominaisuuksista:

Esimerkki 1: Seuraavassa esimerkissä käytetään yhtä arvoa täyte-ominaisuudessa saman täytön asettamiseen kaikille neljälle sivulle.

 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. 

Esimerkin 1 tulos näkyy seuraavassa kuvakaappauksessa:

Esimerkki 2: Seuraava esimerkki käyttää kahta arvoa pehmuste ominaisuus asettaa sama pehmuste vastakkaisille puolille.

 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. 

Esimerkin 2 tulos näkyy seuraavassa kuvakaappauksessa:

Esimerkki 3: Seuraavassa esimerkissä käytetään neljää täyttö-ominaisuuden arvoa eri täytösten asettamiseen kaikille neljälle sivulle.

 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. 

Esimerkin 3 tulos näkyy seuraavassa kuvakaappauksessa: