Si volem afegir farciment al document HTML mitjançant el CSS intern, hem de seguir els passos que es donen a continuació. Mitjançant aquests senzills passos, podem afegir fàcilment el farciment.
10 d'1 milió
Pas 1: En primer lloc, hem d'escriure el codi HTML en qualsevol editor de text o obrir el fitxer HTML existent a l'editor de text al qual volem afegir el farciment.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
Pas 2: Ara, hem de col·locar el cursor a l'etiqueta head just després de l'etiqueta de títol del document HTML i després definir el etiqueta tal com es mostra al bloc següent.
Add the Padding in Html
Pas 3: Ara, hem de definir la propietat de farciment en aquest selector d'identificació que s'especifica just abans del text al qual volem afegir farciment.
A continuació es mostren les cinc propietats diferents a partir de les quals podem aplicar el farciment a cada costat:
i. Encoixinat a l'esquerra:
Si volem aplicar només el farciment esquerre a un element, només haurem d'utilitzar-lo farciment-esquerra propietat al selector d'identificació. I, aleshores, només hem d'establir un valor a la propietat tal com es mostra a l'exemple següent:
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. Prova-ho ara La sortida del codi anterior que utilitza la propietat padding-left es mostra a la captura de pantalla següent:
ii. Encoixinat-dreta:
Si volem aplicar només el farciment dret a un element, només haurem d'utilitzar-lo farciment-dreta propietat al selector d'identificació. I, aleshores, només hem d'establir un valor a la propietat tal com es mostra a l'exemple següent:
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. Prova-ho ara La sortida del codi anterior que utilitza la propietat padding-right es mostra a la captura de pantalla següent:
iii. Encoixinat superior:
Si volem aplicar només el farciment superior a un element, només haurem d'utilitzar-lo encoixinat-parte superior propietat al selector d'identificació. I, aleshores, només hem d'establir un valor a la propietat tal com es mostra a l'exemple següent:
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. Prova-ho ara La sortida del codi anterior que utilitza la propietat padding-top es mostra a la captura de pantalla següent:
iv. Encoixinat inferior:
Si volem aplicar només el farciment inferior a un element, només haurem d'utilitzar-lo encoixinat-baix propietat al selector d'identificació. I, aleshores, només hem d'establir un valor a la propietat tal com es mostra a l'exemple següent:
java genera un nombre aleatori
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. Prova-ho ara La sortida del codi anterior que utilitza la propietat padding-bottom es mostra a la captura de pantalla següent:
v. Encoixinat:
Si volem aplicar el farciment diferent als quatre costats (superior, inferior, esquerre, dret), hem d'especificar els quatre valors a la propietat de farciment.
padding: 10px 50px 75px 200px;
Si especifiquem els dos valors, l'editor Html aplica el primer farciment a la part superior i inferior i el segon farciment a l'esquerra i a la dreta.
padding: 100px 50px;
Si especifiquem només el valor a l'atribut de farciment, l'editor HTML aplica el mateix farciment als quatre costats.
padding: 100px;
Exemples de propietats de farciment:
Exemple 1: L'exemple següent utilitza un valor a la propietat de farciment per establir el mateix farciment als quatre costats.
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. Prova-ho ara La sortida de l'exemple 1 es mostra a la següent captura de pantalla:
Exemple 2: L'exemple següent utilitza dos valors a l' farciment propietat per establir el mateix farciment als costats oposats.
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. Prova-ho ara La sortida de l'exemple 2 es mostra a la captura de pantalla següent:
Exemple 3: L'exemple següent utilitza quatre valors a la propietat de farciment per establir el farciment diferent als quatre costats.
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. Prova-ho ara La sortida de l'exemple 3 es mostra a la captura de pantalla següent:
