TechCodeview

Hvis vi ønsker at tilføje polstring i HTML-dokumentet ved hjælp af den interne CSS, så skal vi følge trinene, som er givet nedenfor. Ved at bruge disse enkle trin kan vi nemt tilføje polstringen.

Trin 1: For det første skal vi skrive HTML-koden i en hvilken som helst teksteditor eller åbne den eksisterende HTML-fil i teksteditoren, hvori vi vil tilføje udfyldningen.

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

Trin 2: Nu skal vi placere markøren i head-tagget lige efter titel-tagget på HTML-dokumentet og derefter definere tag som vist i den følgende blok.

 Add the Padding in Html 

Trin 3: Nu skal vi definere egenskaben for udfyldning i den id-vælger, som er angivet lige før den tekst, som vi vil tilføje udfyldning på.

Følgende er de fem forskellige egenskaber, hvorfra vi kan anvende polstringen på hver side:

c formateret streng

jeg. Polstring-venstre:

Hvis vi kun vil anvende venstre polstring på et element, skal vi kun bruge polstring-venstre egenskab i id-vælgeren. Og så skal vi kun indstille én værdi til egenskaben som vist i følgende eksempel:

kan android spille gamepigeon

 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. 

Outputtet af ovenstående kode, der bruger egenskaben padding-left, vises i følgende skærmbillede:

ii. Polstring-højre:

Hvis vi kun vil anvende rigtig polstring på et element, skal vi kun bruge polstring-højre egenskab i id-vælgeren. Og så skal vi kun indstille én værdi til egenskaben 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. 

Outputtet af ovenstående kode, der bruger padding-right-egenskaben, vises i følgende skærmbillede:

iii. Polstring Top:

Hvis vi kun vil anvende toppolstring på et element, skal vi kun bruge det polstring-top egenskab i id-vælgeren. Og så skal vi kun indstille én værdi til egenskaben 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. 

Outputtet af ovenstående kode, der bruger padding-top-egenskaben, vises i følgende skærmbillede:

iv. Polstring i bund:

Hvis vi kun vil anvende bundpolstring på et element, skal vi kun bruge polstring-bund egenskab i id-vælgeren. Og så skal vi kun indstille én værdi til egenskaben 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. 

Outputtet af ovenstående kode, der bruger egenskaben padding-bottom, vises i følgende skærmbillede:

v. Polstring:

java do while loop

Hvis vi ønsker at anvende den forskellige polstring på alle de fire sider (top, bund, venstre, højre), så skal vi angive de fire værdier i padding-egenskaben.

 padding: 10px 50px 75px 200px; 

Hvis vi angiver de to værdier, så anvender HTML-editoren den første udfyldning til toppen og bunden og anden udfyldning til venstre og højre.

 padding: 100px 50px; 

Hvis vi kun angiver værdi i udfyldningsattributten, så anvender HTML-editoren den samme udfyldning på alle fire sider.

 padding: 100px; 

Eksempler på polstringsejendomme:

Eksempel 1: Følgende eksempel bruger én værdi i padding-egenskaben til at indstille den samme padding til alle fire sider.

 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. 

Outputtet fra eksempel 1 er vist i følgende skærmbillede:

Eksempel 2: Følgende eksempel bruger to værdier i polstring egenskab for at indstille den samme polstring til de modsatte sider.

understregning

 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. 

Outputtet fra eksempel 2 er vist i følgende skærmbillede:

Eksempel 3: Følgende eksempel bruger fire værdier i padding-egenskaben til at indstille den forskellige padding til alle fire sider.

 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. 

Outputtet fra eksempel 3 er vist i følgende skærmbillede: