Pedi padding ni moja ya mali ya mfano CSS sanduku . Kipengee hiki cha kifupi kinaweka pande zote pande zote nne za kipengele cha HTML. Pedi padding inaweza kutumika karibu kila tag HTML (isipokuwa kwa baadhi ya vitambulisho meza). Zaidi ya hayo, pande zote nne za kipengele zinaweza kuwa na thamani tofauti.
CSS Mali ya Padding
Ili kutumia mali ya kifupi ya CSS, unaweza kutumia mnono "TROUBLe" (au "TRiBbLe" kwa mashabiki wa Star Trek). Hii inasimama juu , kulia , chini , na kushoto , na inamaanisha utaratibu wa upana wa vipande ulioweka kwenye mali ya kifupi. Kwa mfano:
padding: juu kushoto ya chini kushoto; padding: 1px 2px 3px 6px;Ikiwa unatumia maadili yaliyoorodheshwa hapo juu, ingeweza kutumika thamani tofauti ya padding kwa kila upande wa kipengele chochote cha HTML unachotumia. Ikiwa unataka kutumia pazia sawa na pande zote nne, unaweza kuboresha CSS yako na tu kuandika thamani moja:
padding: 12px;Kwa mstari huo wa CSS, saizi 12 za padding zinaweza kutumika kwa pande zote nne za kipengele.
Ikiwa unataka padding kuwa sawa kwa juu na chini na kushoto na kulia, unaweza kuandika maadili mawili:
padding: 24px 48px;Thamani ya kwanza (24px) itatumika kwa juu na chini, wakati wa pili utaomba upande wa kushoto na wa kulia.
Ikiwa unaandika maadili matatu, hiyo itafanya padding ya usawa (kushoto na kulia) sawa, wakati wa kubadilisha juu na chini:
padding: chini ya kulia na kushoto chini; padding: 0px 1px 3px;Kwa mujibu wa mfano wa sanduku la CSS, padding iko karibu na kipengele / maudhui yenyewe. Hii ina maana kuwa padding imeongezwa kwa kipengele kati ya upana wa maudhui au urefu na maadili yoyote ya mpaka unayotumia. Ikiwa padding imewekwa kwa sifuri, basi ina makali sawa na maudhui.
Vipimo vya CSS Padding
CSS padding inaweza kuchukua thamani yoyote isiyo ya hasi ya thamani. Hakikisha kutaja kipimo, kama vile px au em. Unaweza pia kutaja asilimia kwa padding yako, ambayo itakuwa asilimia ya upana wa kuzuia kipengele. Hii inajumuisha kwa padding ya juu na chini. Kwa mfano:
#container {upana: 800px; urefu: 200px; } #container p {upana: 400px; urefu: 75%; padding: 25% 0; }Urefu wa kifungu ndani ya kipengele cha # kipengee kitakuwa 75% ya urefu wa #container pamoja na 25% ya upana kwa padding ya juu na 25% ya upana kwa padding ya chini. Hii jumla 300 + 200 + 200 = 700px.
Athari za Kuongeza CSS Padding
Kwenye vitu vya ngazi ya kuzuia , padding hutumiwa kwenye pande nne. Kwa sababu kipengele ni block au sanduku tayari, padding ni kutumika kwa pande ya sanduku.
Wakati padding ya CSS imeongezwa kwa vipengele vya ndani , huenda kuna kuingizwa kwa vipengele hapo juu na chini ya kipengele cha inline ikiwa padding ya wima inazidi urefu wa mstari, lakini haitasimama urefu wa mstari. Kudhibiti padole CSS kutumiwa kwa vipengele vya ndani huongeza kwenye mwanzo wa kipengele na mwisho wa kipengele. Na padding inaweza kuunganisha mistari. Lakini haitatumika kwenye mstari wote wa kipengele cha mstari wa multi, hivyo huwezi kutumia padding ili kuingiza sehemu ya maudhui ya ndani ya mstari wa kila aina.
Pia, katika CSS2.1, huwezi kuunda vitalu vya chombo ambapo upana unategemea kipengele na asilimia kwa widths (au upanaji wa vipande). Ikiwa unafanya matokeo hayajafanywa. Watazamaji wataendelea kuonyesha yaliyomo, lakini huwezi kupata matokeo unayotarajia. Ikiwa unafikiri juu yake, ina maana, kama kipengele chako cha chombo kinahitaji kujua upana wa vipengele vya mtoto wake ili kufafanua upana wake-kama vile hauna upana wa awali, na moja au zaidi ina upana umewekwa kama asilimia ya kipengele cha chombo, hii inaweka mlolongo wa mviringo bila jibu. Ikiwa unatumia asilimia kwa upana wa kitu chochote kwenye waraka wako, unapaswa kuhakikisha kuwa upana wa kipengele cha wazazi pia hufafanuliwa.