Om vi vill lägga till utfyllnad i HTML-dokumentet med den interna CSS, måste vi följa stegen som ges nedan. Med dessa enkla steg kan vi enkelt lägga till stoppningen.
Steg 1: Först måste vi skriva HTML-koden i valfri textredigerare eller öppna den befintliga HTML-filen i textredigeraren där vi vill lägga till utfyllnad.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
Steg 2: Nu måste vi placera markören i head-taggen precis efter titeltaggen för HTML-dokumentet och sedan definiera taggen som visas i följande block.
Add the Padding in Html
Steg 3: Nu måste vi definiera egenskapen för utfyllnad i den id-väljaren som anges precis före texten som vi vill lägga till utfyllnad på.
Följande är de fem olika egenskaperna från vilka vi kan applicera stoppningen på varje sida:
i. Vaddering-vänster:
Om vi bara vill använda vänster stoppning på ett element måste vi bara använda stoppning-vänster egenskap i id-väljaren. Och då måste vi bara ställa in ett värde på egenskapen som visas i följande exempel:
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. Testa det nu Utdata från ovanstående kod som använder padding-left-egenskapen visas i följande skärmdump:
ii. Utfyllnad-höger:
Om vi bara vill använda höger stoppning på ett element måste vi bara använda stoppning-höger egenskap i id-väljaren. Och då måste vi bara ställa in ett värde på egenskapen som visas i följande exempel:
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. Testa det nu Utdata från ovanstående kod som använder padding-right-egenskapen visas i följande skärmdump:
iii. Vadderad topp:
Om vi bara vill använda toppstoppning på ett element måste vi bara använda stoppning-top egenskap i id-väljaren. Och då måste vi bara ställa in ett värde på egenskapen som visas i följande exempel:
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. Testa det nu Utdata från ovanstående kod som använder padding-top-egenskapen visas i följande skärmdump:
uml diagram java
iv. Vaddering botten:
Om vi bara vill använda bottenstoppning på ett element, måste vi bara använda stoppning-botten egenskap i id-väljaren. Och då måste vi bara ställa in ett värde på egenskapen som visas i följande exempel:
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. Testa det nu Utdata från ovanstående kod som använder padding-bottom-egenskapen visas i följande skärmdump:
v. Utfyllnad:
Om vi vill tillämpa de olika utfyllnaderna på alla fyra sidorna (överst, botten, vänster, höger), måste vi ange de fyra värdena i utfyllnadsegenskapen.
padding: 10px 50px 75px 200px;
Om vi anger de två värdena så tillämpar HTML-redigeraren den första utfyllnaden på toppen och botten och den andra utfyllningen till vänster och höger.
padding: 100px 50px;
Om vi endast anger värde i utfyllnadsattributet, tillämpar HTML-redigeraren samma utfyllnad på alla fyra sidorna.
padding: 100px;
Exempel på utfyllnadsegenskap:
Exempel 1: Följande exempel använder ett värde i padding-egenskapen för att ställa in samma utfyllnad på alla fyra sidorna.
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. Testa det nu Utdata från exempel 1 visas i följande skärmdump:
Exempel 2: Följande exempel använder två värden i stoppning egenskap för att ställa in samma utfyllnad på motsatta sidor.
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. Testa det nu Utdata från exempel 2 visas i följande skärmdump:
Exempel 3: Följande exempel använder fyra värden i padding-egenskapen för att ställa in olika utfyllnad på alla fyra sidorna.
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. Testa det nu Utdata från exempel 3 visas i följande skärmdump:
