Hvis vi ønsker å legge til utfylling i HTML-dokumentet ved å bruke den interne CSS-en, må vi følge trinnene som er gitt nedenfor. Ved å bruke disse enkle trinnene kan vi enkelt legge til polstringen.
Trinn 1: For det første må vi skrive inn HTML-koden i et hvilket som helst tekstredigeringsprogram eller åpne den eksisterende HTML-filen i tekstredigeringsprogrammet der vi vil legge til utfyllingen.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
Steg 2: Nå må vi plassere markøren i head-taggen like etter tittelkoden til HTML-dokumentet og deretter definere tag som vist i følgende blokk.
Add the Padding in Html
Trinn 3: Nå må vi definere egenskapen til utfylling i den id-velgeren som er spesifisert rett før teksten vi vil legge til utfylling på.
Følgende er de fem forskjellige egenskapene som vi kan bruke polstring fra på hver side:
c formatert streng
Jeg. Polstring-venstre:
Hvis vi kun vil bruke venstre polstring på et element, må vi kun bruke polstring-venstre egenskap i id-velgeren. Og da må vi bare sette én verdi til egenskapen som vist i følgende eksempel:
css overgangsopasitet
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. Test det nå Utdataene fra koden ovenfor som bruker padding-left-egenskapen vises i følgende skjermbilde:
ii. Polstring-høyre:
Hvis vi bare vil bruke riktig polstring på et element, må vi bare bruke polstring-høyre egenskap i id-velgeren. Og da må vi bare sette én verdi til egenskapen som vist i følgende eksempel:
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. Test det nå Utdataene fra koden ovenfor som bruker padding-right-egenskapen vises i følgende skjermbilde:
iii. Polstring topp:
Hvis vi bare vil bruke topppolstring på et element, må vi kun bruke polstring-topp egenskap i id-velgeren. Og da må vi bare sette én verdi til egenskapen som vist i følgende eksempel:
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. Test det nå Utdataene fra koden ovenfor som bruker padding-top-egenskapen vises i følgende skjermbilde:
iv. Polstring bunn:
Hvis vi bare vil bruke bunnpolstring på et element, må vi bare bruke polstring-bunn egenskap i id-velgeren. Og da må vi bare sette én verdi til egenskapen som vist i følgende eksempel:
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. Test det nå Utdataene fra koden ovenfor som bruker padding-bottom-egenskapen vises i følgende skjermbilde:
v. Polstring:
java do while loop
Hvis vi vil bruke den forskjellige polstringen på alle de fire sidene (øverst, bunn, venstre, høyre), må vi spesifisere de fire verdiene i padding-egenskapen.
padding: 10px 50px 75px 200px;
Hvis vi spesifiserer de to verdiene, bruker HTML-editoren den første utfyllingen til toppen og bunnen og andre utfylling til venstre og høyre.
padding: 100px 50px;
Hvis vi spesifiserer kun verdi i utfyllingsattributtet, bruker HTML-editoren den samme utfyllingen på alle de fire sidene.
padding: 100px;
Eksempler på polstringseiendom:
Eksempel 1: Følgende eksempel bruker én verdi i padding-egenskapen for å angi samme utfylling på alle fire sidene.
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. Test det nå Utdataene fra eksempel 1 vises i følgende skjermbilde:
Eksempel 2: Følgende eksempel bruker to verdier i polstring egenskap for å sette den samme polstringen til de motsatte sidene.
understreking
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. Test det nå Utdataene fra eksempel 2 vises i følgende skjermbilde:
Eksempel 3: Følgende eksempel bruker fire verdier i padding-egenskapen for å angi den forskjellige utfyllingen til alle de fire sidene.
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. Test det nå Utdataene fra eksempel 3 vises i følgende skjermbilde:
