Ang padding ng CSS ay isa sa mga katangian ng modelo ng CSS box . Ang takip na ito ay nagtatakda ng padding sa paligid ng lahat ng apat na panig ng isang elemento ng HTML. Maaaring ilapat ang padding ng CSS sa halos bawat HTML na tag (maliban sa ilan sa mga tag ng talahanayan). Bukod pa rito, ang lahat ng apat na panig ng elemento ay maaaring magkaroon ng ibang halaga.
CSS Padding Property
Upang gamitin ang shorthand CSS padding property, maaari mong gamitin ang nimonik "TRouBLe" (o "TRiBbLe" para sa iyo ang mga tagahanga ng Star Trek). Ito ay kumakatawan sa itaas , kanan , ibaba , at kaliwa , at ito ay tumutukoy sa pagkakasunud-sunod ng lapad ng padding na itinakda mo sa shorthand property. Halimbawa:
padding: itaas na kanang ibaba sa kaliwa; padding: 1px 2px 3px 6px;Kung ginamit mo ang mga halaga na nakalista sa itaas, maglalapat ito ng ibang halaga ng padding sa bawat panig ng anumang elemento ng HTML na iyong inilalapat dito. Kung gusto mong ilapat ang parehong padding sa lahat ng apat na panig, maaari mong gawing simple ang iyong CSS at isulat lang ang isang halaga:
padding: 12px;Gamit ang linya ng CSS, 12 pixels ng padding ay nalalapat sa lahat ng 4 panig ng elemento.
Kung nais mo na ang padding ay pareho para sa itaas at ibaba at kaliwa at kanan, maaari mong isulat ang dalawang halaga:
padding: 24px 48px;Ang unang halaga (24px) ay nalalapat sa itaas at ibaba, habang ang pangalawang ay nalalapat sa kaliwa at kanan.
Kung sumulat ka ng tatlong halaga, gagawin mo ang pahalang padding (kaliwa at kanan) pareho, habang binabago ang itaas at ibaba:
padding: itaas na kanan at kaliwang ibaba; padding: 0px 1px 3px;Ayon sa modelo ng CSS box, ang padding ay pinakamalapit sa elemento / nilalaman mismo. Nangangahulugan ito na ang padding ay idinagdag sa isang elemento sa pagitan ng lapad o taas ng nilalaman at anumang mga halaga ng hangganan na iyong ginagamit. Kung ang padding ay naka-set sa zero, pagkatapos ito ay may parehong gilid ng nilalaman.
Mga Halaga ng Padding ng CSS
Ang padding ng CSS ay maaaring tumagal ng anumang di-negatibong haba ng halaga. Tiyaking tukuyin ang pagsukat, tulad ng px o em. Maaari mo ring tukuyin ang isang porsyento para sa iyong padding, na kung saan ay isang porsyento ng lapad ng elemento na naglalaman ng block. Kabilang dito ang para sa top at bottom padding. Halimbawa:
#container {width: 800px; taas: 200px; } #container p {width: 400px; taas: 75%; padding: 25% 0; }Ang taas ng talata sa loob ng elemento ng #container ay 75% ng taas ng #container plus 25% ng lapad para sa tuktok na padding at 25% ng lapad para sa ilalim na padding. Ang mga kabuuan ay 300 + 200 + 200 = 700px.
Mga Epekto ng Pagdaragdag ng Padding ng CSS
Sa mga elemento ng block-level , ang padding ay inilalapat sa apat na panig. Dahil ang elemento ay isang bloke o kahon na, ang padding ay inilalapat sa mga gilid ng kahon.
Kapag ang padding ng CSS ay idinagdag sa mga elemento ng inline , maaaring may ilang mga overlapping ng mga elemento sa itaas at sa ibaba ng inline na elemento kung lumagpas ang vertical padding sa taas ng linya, ngunit hindi nito itulak ang taas ng linya pababa. Pahalang na CSS padding na inilapat sa mga inline na elemento ay idadagdag sa simula ng elemento at sa dulo ng elemento. At ang padding ay maaaring balutin ng mga linya. Ngunit hindi ito mag-aplay sa lahat ng mga linya ng isang elemento ng multi-line, kaya hindi mo maaaring gamitin ang padding upang indent isang segment ng multi-line na inline na nilalaman.
Gayundin, sa CSS2.1, hindi ka maaaring gumawa ng mga bloke ng lalagyan kung saan ang lapad ay nakasalalay sa isang elemento na may mga porsyento para sa mga lapad (o padding width). Kung gagawin mo ang resulta ay hindi natukoy. Ang mga browser ay magpapakita pa rin ng mga nilalaman, ngunit maaaring hindi mo makuha ang mga resulta na iyong inaasahan. Kung iniisip mo ito, makatuwiran, na ang iyong lalagyan ng elemento ay kailangang malaman ang lapad ng mga elemento ng kanyang anak upang matukoy ang lapad nito-tulad ng kung wala itong paunang natukoy na lapad, at isa o higit pa ang may isang lapad na itinakda bilang isang porsyento ng elemento ng lalagyan, ito ay nagtatakda ng isang pabilog na kadena na walang sagot. Kung gumagamit ka ng mga porsyento para sa mga lapad ng anumang bagay sa iyong dokumento, dapat mong tiyakin na ang parent width element ay tinukoy din.