Ja mēs vēlamies pievienot HTML dokumentam polsterējumu, izmantojot iekšējo CSS, mums ir jāveic tālāk norādītās darbības. Izmantojot šīs vienkāršās darbības, mēs varam viegli pievienot polsterējumu.
1. darbība: Pirmkārt, mums ir jāievada HTML kods jebkurā teksta redaktorā vai jāatver esošais HTML fails teksta redaktorā, kuram mēs vēlamies pievienot polsterējumu.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
2. darbība: Tagad mums ir jānovieto kursors head tagā tieši aiz HTML dokumenta nosaukuma taga un pēc tam jādefinē tagu, kā parādīts nākamajā blokā.
Add the Padding in Html
3. darbība: Tagad mums ir jādefinē pildījuma rekvizīts tajā id atlasītājā, kas ir norādīts tieši pirms teksta, kuram mēs vēlamies pievienot polsterējumu.
Tālāk ir norādītas piecas dažādas īpašības, no kurām mēs varam uzklāt polsterējumu katrā pusē:
i. Polsterējums pa kreisi:
Ja elementam vēlamies lietot tikai kreiso polsterējumu, mums ir jāizmanto tikai polsterējums-pa kreisi rekvizītu id atlasītājā. Un tad mums ir jāiestata tikai viena īpašuma vērtība, kā parādīts šajā piemērā:
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. Izmēģiniet to tūlīt Iepriekš minētā koda izvade, kurā tiek izmantots rekvizīts polsterējums-left, ir parādīts šajā ekrānuzņēmumā:
ii. Polsterējums pa labi:
datoru organizācija un arhitektūra
Ja mēs vēlamies elementam piemērot tikai pareizo polsterējumu, mums ir jāizmanto tikai polsterējums-pa labi rekvizītu id atlasītājā. Un tad mums ir jāiestata tikai viena rekvizīta vērtība, kā parādīts šajā piemērā:
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. Izmēģiniet to tūlīt Iepriekš minētā koda izvade, kas izmanto rekvizītu polsterējuma tiesības, ir parādīta šajā ekrānuzņēmumā:
iii. Polsterējuma augšdaļa:
Ja elementam vēlamies pielietot tikai augšējo polsterējumu, tad jāizmanto tikai polsterējums-top rekvizītu id atlasītājā. Un tad mums ir jāiestata tikai viena rekvizīta vērtība, kā parādīts šajā piemērā:
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. Izmēģiniet to tūlīt Iepriekš minētā koda izvade, kas izmanto rekvizītu polsterējuma augšpusē, ir parādīta šajā ekrānuzņēmumā:
iv. Polsterējums apakšā:
Ja elementam vēlamies lietot tikai apakšējo polsterējumu, tad mums ir jāizmanto tikai polsterējums-apakšā rekvizītu id atlasītājā. Un tad mums ir jāiestata tikai viena rekvizīta vērtība, kā parādīts šajā piemērā:
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. Izmēģiniet to tūlīt Iepriekš minētā koda izvade, kurā tiek izmantots rekvizīts polsterējums-apakšā, ir parādīts šajā ekrānuzņēmumā:
v. Polsterējums:
Ja mēs vēlamies piemērot atšķirīgu polsterējumu visām četrām pusēm (augšpusē, apakšā, pa kreisi, pa labi), tad mums ir jānorāda četras vērtības polsterējuma rekvizītā.
padding: 10px 50px 75px 200px;
Ja mēs norādām abas vērtības, HTML redaktors piemēro pirmo polsterējumu augšpusē un apakšā un otro polsterējumu pa kreisi un pa labi.
padding: 100px 50px;
Ja polsterējuma atribūtā norādām tikai vērtību, tad HTML redaktors visām četrām pusēm piemēro vienu un to pašu polsterējumu.
padding: 100px;
Polsterējuma rekvizītu piemēri:
1. piemērs: Nākamajā piemērā polsterējuma rekvizītā tiek izmantota viena vērtība, lai iestatītu vienu un to pašu polsterējumu visām četrām pusēm.
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. Izmēģiniet to tūlīt 1. piemēra izvade ir parādīta šajā ekrānuzņēmumā:
2. piemērs: Nākamajā piemērā tiek izmantotas divas vērtības polsterējums rekvizītu, lai iestatītu to pašu polsterējumu pretējās pusēs.
.net apmācība
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. Izmēģiniet to tūlīt 2. piemēra izvade ir parādīta šajā ekrānuzņēmumā:
3. piemērs: Nākamajā piemērā polsterējuma rekvizītā tiek izmantotas četras vērtības, lai iestatītu atšķirīgo pildījumu visām četrām pusēm.
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. Izmēģiniet to tūlīt 3. piemēra izvade ir parādīta šajā ekrānuzņēmumā:
