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. Testaa nyt 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. Testaa nyt 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. Testaa nyt 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. Testaa nyt 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. Testaa nyt 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. Testaa nyt 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. Testaa nyt Esimerkin 3 tulos näkyy seuraavassa kuvakaappauksessa:
