L- ikkuttunar CSS huwa wieħed mill-proprjetajiet tal- mudell tal-kaxxa CSS . Din il-proprjetà ta 'tajpjar tistabbilixxi l-ikkuttunar madwar l-erba' naħat ta 'element HTML. L-ikkuttunar tas-CSS jista 'jiġi applikat għal kważi kull tikketta HTML (ħlief għal xi wħud mit-tikketti tal-mejda). Barra minn hekk, l-erba 'naħat tal-element jista' jkollhom valur differenti.
CSS Padding Property
Biex tuża l-proprjetà tal-ikkuttunar tas-CSS ta 'wara, int tista' tuża l-mnemonika "TRouBLe" (jew "TRiBbLe" ghalik fannijiet ta 'Star Trek). Dan ifisser il- quċċata , id-dritt , il- qiegħ , u x-xellug , u tirreferi għall-ordni tal-wisa 'tal-padding li ssettja fil-proprjetà ta' tajpisti. Pereżempju:
ikkuttunar: il-qiegħ ta 'isfel fuq il-lemin; ikkuttunar: 1px 2px 3px 6px;Jekk użajt il-valuri elenkati hawn fuq, tkun tapplika valur ta 'l-ikkuttunar differenti għal kull naħa ta' kwalunkwe element HTML li qed tapplikaha. Jekk trid tapplika l-istess padding għall-erba 'naħat kollha, tista' tissimplifika s-CSS tiegħek u sempliċement tikteb valur wieħed:
ikkuttunar: 12px;B'dik il-linja ta 'CSS, 12-il pixel ta' padding japplikaw għall-ġnub kollha ta 'l-element.
Jekk trid li l-ikkuttunar ikun l-istess għall-parti ta 'fuq u ta' isfel u xellug u lemin, tista 'tikteb żewġ valuri:
ikkuttunar: 24px 48px;L-ewwel valur (24px) japplika għall-parti ta 'fuq u ta' isfel, filwaqt li t-tieni tkun tapplika fuq ix-xellug u lejn il-lemin.
Jekk tikteb tliet valuri, dan jagħmel l-ikkuttunar orizzontali (ix-xellug u l-lemin) l-istess, filwaqt li jibdel il-parti ta 'fuq u ta' isfel:
ikkuttunar: qiegħ ta 'fuq fuq ix-xellug u lejn ix-xellug; ikkuttunar: 0px 1px 3px;Skont il-mudell tal-kaxxa tas-CSS, il-padding huwa l-eqreb għall-element / kontenut innifsu. Dan ifisser li l-ikkuttunar huwa miżjud ma 'element bejn il-wisa jew l-għoli tal-kontenut u kwalunkwe valur tal-fruntiera li tuża. Jekk l-ikkuttunar huwa ssettjat għal żero, allura għandu l-istess tarf tal-kontenut.
Valuri tal-ikkuttunar tas-CSS
L-ikkuttunar tas-CSS jista 'jieħu kwalunkwe valur tat-tul mhux negattiv. Kun żgur li tispeċifika l-kejl, bħal px jew em. Tista 'wkoll tispeċifika persentaġġ għall-ikkuttunar tiegħek, li jkun perċentwal tal-wisa' tal-blokk li fih l-element. Dan jinkludi għall-ikkuttunar ta 'fuq u ta' isfel. Pereżempju:
#container {wisa ': 800px; għoli: 200px; } #container p (wisa ': 400px; għoli: 75%; padding: 25% 0; }L-għoli tal-paragrafu ġewwa l-element #container ikun 75% ta 'l- għoli ta ' #container flimkien ma '25% tal-wisa' għall-ikkuttunar ta 'fuq u 25% tal-wisa' għall-ikkuttunar tal-qiegħ. Dan jammonta għal 300 + 200 + 200 = 700px.
Effetti ta 'Żieda ta' Padding CSS
Fuq elementi ta 'livell ta' blokka , l-ikkuttunar huwa applikat fuq l-erba 'naħat. Minħabba li l-element huwa diġà blokk jew kaxxa, l-ikkuttunar huwa applikat għall-ġnub tal-kaxxa.
Meta l-ikkuttunar tas-CSS jiġi miżjud ma ' elementi inline , jista' jkun hemm xi overlapping ta 'elementi' l fuq u 'l isfel mill-element inline jekk il-padding vertikali jaqbeż l-għoli tal-linja, iżda mhux se jimbotta l-għoli tal-linja. L-ikkuttunar orizzontali CSS applikat għal elementi inline se jiżdiedu mal-bidu ta 'l-element u t-tmiem ta' l-element. U l-ikkuttunar jista 'jgħaqqad il-linji. Iżda mhux se japplika għall-linji kollha ta 'element b'ħafna linji, sabiex ma tistax tuża padding biex inċiżi segment ta' kontenut inline multi-line.
Ukoll, f'CSS2.1, ma tistax toħloq blokki tal-kontejners fejn il-wisa 'tiddependi minn element b'perċentwali għal wisa' (jew wisa 'tal-padding). Jekk tagħmel ir-riżultat mhux definit. Il-browsers xorta se juru l-kontenut, imma int ma tistax tikseb ir-riżultati li qed tistenna. Jekk taħseb dwarha, jagħmel sens, bħallikieku l-element tal-kontenitur tiegħek jeħtieġ li jkun jaf il-wisa 'tal-elementi tat-tfal tiegħu sabiex jiddefinixxi l-wisa' tiegħu bħal meta ma jkollux wisa 'predefinita, u wieħed jew aktar Wisa 'stabbilit bħala perċentwal tal-element tal-kontenitur, dan iwaqqaf katina ċirkolari mingħajr ebda tweġiba. Jekk tuża perċentwali għal wisa 'ta' xi ħaġa fuq id-dokument tiegħek, għandek tiżgura ruħek li l-wisa 'tal-element prinċipali huma definiti wkoll.