ʻO CSS ka paleʻana kekahi o nā waiwai o ka model box CSS . Hoʻonohonoho kēia meaʻokoʻa i ka pale e hoʻopuni ana i nāʻaoʻaoʻehā o kahi mea HTML. Hiki ke hoʻohanaʻia ka paleʻana iā CSS i ka paukū o kēlā me kēia HTML tag (koe wale nō kekahi o nā mīkini papa). Eia hou, hiki i nāʻaoʻaoʻehā o ka mea ke hoʻololi i ka waiwai'ē aʻe.
CSS Padding Property
No ka hoʻohanaʻana i ka waiwai hoʻopiʻi CSS pōkole, hiki iāʻoe ke hoʻohana i ka "TRouBLe" memoni (a iʻole "TRiBbLe" no nā Star Trek fans). ʻO kēia no kaʻaoʻao , ka'ākau , ka lalo , a me ka hema , a pili i ka papa o nā ākea o ka ulana āu i hoʻonoho ai i ka waiwai pōkole. ʻo kahi laʻana:
ka paleʻana: ka'ākau ma lalo hema; hoʻopiʻi: 1px 2px 3px 6px;Inā hoʻohanaʻoe i nā helu i heluʻia ma luna nei, e hoʻohanaʻia kekahiʻano pale pale'ē aʻe ma nāʻaoʻao a pau o nā mea HTML e hoʻoiho anaʻoe ia. Inā makemakeʻoe e hoʻohana i ka pale like hoʻokahi ma nāʻaoʻaoʻehā, hiki iāʻoe ke hoʻohaʻahaʻa i kāu CSS a e kākau wale i kahi helu:
Palena: 12px;Me kēlā laina o CSS, 12 mau pixels o ka pale e pili ana i nāʻaoʻao 4 a pau o ka mea.
Inā makemakeʻoe i ka likeʻana o ka pale no ka luna a me ka lalo a me ka'ākau, hiki iāʻoe ke kākau iʻelua mau koina:
ka pale: 24px 48px;E pili ana ka helu mua (24px) i ka piko a me ka lalo, aʻo ka lua e pili ana i ka hema a me ka'ākau.
Ināʻoe e kākau i nā kumukūʻaiʻekolu,ʻo ia ke hana i ka pale pale kau (hema a'ākau) me ka hoʻololiʻana i ka luna a me lalo:
ka pale: luna'ākau a me ka hema i lalo; pali: 0px 1px 3px;E like me keʻano o ka pahu CSS, hiki i ka palekana ke kokoke loa i ka mea / ihi iho. ʻO keʻano, ua hoʻokomoʻia ka pale i kekahi mea i waena o ka'ūpuni iʻole ka kiʻekiʻe a me nā palena palena e hoʻohana aiʻoe. Inā ua hoʻonohonohoʻia ka pale i kaʻole, a laila ua like like ka helu me ka mea.
CSS Pahiliʻana Nā Uila
Hiki iā CSS hiki ke lawe i kekahi koina lōʻihiʻole. E hoʻomaopopo pono i ke ana, e like me ka px a iʻole ka. Hiki iāʻoe ke hoʻohālike i ka hoʻohālike no kāu pale, a he hapakū o ka whānui o ka poʻomena pūnaewele. Loaʻa kēia no ka paleʻana a me lalo. ʻo kahi laʻana:
#container {whānui: 800px; ke kiʻekiʻe: 200px; } #container p {size: 400px; piʻi: 75%; ka pale: 25% 0; }ʻO ka kiʻekiʻe o ka paukū i loko o ka māhele #container e 75% o ka kiʻekiʻe o #container a me 25% o ka whānui no ka pale pale a 25% o ka laulā no ka pale lalo. ʻO kēia 300 + 200 + 200 = 700px.
Nā hopena o ka hoʻokomoʻana iā CSS Padding
Ma nā'āpana o ka pale, e hoʻohanaʻia ka pale ma nāʻaoʻaoʻehā. Ma muli o ka mea he pahu a pahu paha i hala, ua hoʻohanaʻia ka pale i nāʻaoʻao pahu.
I ka wā e hoʻonuiʻia ai ka paleʻana CSS i nā'enewa inline , hiki paha ke hoʻonui i nāʻoihana ma luna a ma lalo o ke kiʻina inline ināʻoi aʻe ka pale pale i ke kiʻekiʻe o ka laina, akāʻaʻole ia e kaomi i ke kiʻekiʻe o ka laina. Hiki ke hoʻohuiʻia ka hoʻopiʻi CSS hoʻohālike i nā'enela i loko o ka pae a me ka hopena o ka mea. Aʻo nā kaula e kau i nā laina. Akā,ʻaʻole ia e pili i nā laina a pau o kahi hua'ōlelo nui-nui, no lailaʻaʻole hiki iāʻoe ke hoʻohana i ka paleʻana i kahi māhele o kaʻenehana laina maha.
Eia nō hoʻi, ma CSS2.1,ʻaʻole hiki iāʻoe ke hana i nā pahu pahu kahi kahi i kauʻia ai ka laulā ma luna o kekahi mea me nā pākēneka no nā whānui (aiʻole nā ākea pauna). Inā 'oe e hana i ka hopena, ponoʻole. E hōʻike ka meaʻike i nā mea, akāʻaʻoleʻoe e loaʻa nā hopena āu e manaʻo nei. Ināʻoe e noʻonoʻo i ia mea, he kūpono maoli ia, e like me ka mea e pono ai kaʻike o kāu pahu eʻike i ka laulā o nā māmā o nā keiki no ka ho'ākākaʻana i kona ākea-e like me ka manawaʻaʻole i loaʻa ka whānui o ka ho'ākākaʻana, a hoʻokahi aʻoi aʻe paha ʻo ka laulā e like me ka hapene o ka'enela pahu, e hoʻonohonoho i kahi kaula i kohoʻia me ka paneʻole. Inā hoʻohanaʻoe i nā pākēneka no nā whānui o kekahi mea ma kāu palapala, ponoʻoe e hōʻoia i ka weheweheʻia o nā kikowaena o nā mākua.