Ha a Belső CSS segítségével kitöltést szeretnénk hozzáadni a HTML dokumentumhoz, akkor az alábbi lépéseket kell követnünk. Ezekkel az egyszerű lépésekkel könnyedén hozzáadhatjuk a párnázást.
1. lépés: Először is be kell írnunk a HTML kódot bármelyik szövegszerkesztőbe, vagy meg kell nyitnunk a meglévő HTML-fájlt a szövegszerkesztőben, amelybe a kitöltést szeretnénk hozzáadni.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
2. lépés: Most a kurzort a head címkébe kell helyeznünk közvetlenül a HTML-dokumentum címcímkéje után, majd meg kell határoznunk a címkét a következő blokkban látható módon.
Add the Padding in Html
3. lépés: Most meg kell határoznunk a kitöltés tulajdonságát abban az azonosító választóban, amely közvetlenül a szöveg előtt van megadva, amelyhez kitöltést szeretnénk hozzáadni.
Az alábbiakban bemutatjuk az öt különböző tulajdonságot, amelyek alapján mindkét oldalon felhelyezhetjük a párnázást:
1 / 1000,00
én. Padding-bal:
Ha csak bal oldali kitöltést akarunk alkalmazni egy elemre, akkor csak ezt kell használnunk padding-bal tulajdonságot az id választóban. Ezután csak egy értéket kell beállítanunk a tulajdonsághoz, ahogy az a következő példában látható:
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. Tesztelje most A fenti kód kimenete, amely a padding-left tulajdonságot használja, a következő képernyőképen látható:
ii. Kitöltés jobbra:
java beillesztési rendezés
Ha csak megfelelő kitöltést szeretnénk alkalmazni egy elemre, akkor csak a megfelelőt kell használnunk padding-right tulajdonságot az id választóban. Ezután csak egy értéket kell beállítanunk a tulajdonsághoz, ahogy az a következő példában látható:
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. Tesztelje most A padding-right tulajdonságot használó fenti kód kimenete a következő képernyőképen látható:
iii. Bélés felsőrész:
Ha csak felső párnázást akarunk alkalmazni egy elemre, akkor csak ezt kell használnunk padding-top tulajdonságot az id választóban. Ezután csak egy értéket kell beállítanunk a tulajdonsághoz, ahogy az a következő példában látható:
lexikográfiai rend
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. Tesztelje most A padding-top tulajdonságot használó fenti kód kimenete a következő képernyőképen látható:
iv. Alsó párnázás:
Ha csak alsó párnázást akarunk alkalmazni egy elemre, akkor csak ezt kell használnunk párnázó-alsó tulajdonságot az id választóban. Ezután csak egy értéket kell beállítanunk a tulajdonsághoz, ahogy az a következő példában látható:
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. Tesztelje most A padding-bottom tulajdonságot használó fenti kód kimenete a következő képernyőképen látható:
v. Bélés:
Ha mind a négy oldalra (fent, lent, balra, jobbra) különböző kitöltést szeretnénk alkalmazni, akkor a padding tulajdonságban meg kell adnunk a négy értéket.
sanjay dutt és
padding: 10px 50px 75px 200px;
Ha megadjuk a két értéket, akkor a Html-szerkesztő az első kitöltést felülre és lentre, a második kitöltést pedig balra és jobbra alkalmazza.
padding: 100px 50px;
Ha a padding attribútumban csak értéket adunk meg, akkor a HTML-szerkesztő ugyanazt a kitöltést alkalmazza mind a négy oldalra.
mit csinál ravel a pythonban
padding: 100px;
Példák a kitöltési tulajdonságokra:
1. példa: A következő példa egy értéket használ a padding tulajdonságban, hogy ugyanazt a kitöltést állítsa be mind a négy oldalra.
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. Tesztelje most Az 1. példa kimenete a következő képernyőképen látható:
2. példa: A következő példa két értéket használ a párnázás tulajdonságot, hogy ugyanazt a paddingot állítsa be az ellenkező oldalakra.
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. Tesztelje most A 2. példa kimenete a következő képernyőképen látható:
3. példa: A következő példa négy értéket használ a padding tulajdonságban a különböző kitöltés beállításához mind a négy oldalon.
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. Tesztelje most A 3. példa kimenete a következő képernyőképen látható:
