Tlhaloso e khutšoanyane ea CSS Padding

CSS padding ke e 'ngoe ea thepa ea CSS lebokose la mohlala . Sebaka sena sa shorthand se beha marang-rang ho potoloha mahlakoreng ana a mane a karolo ea HTML. CSS padding e ka sebelisoa hoo e batlang e le letšoao le leng le le leng la HTML (ntle le tse ling tsa matšoao a tafole). Ho phaella moo, mahlakoreng 'ohle a mane a sephahla a ka ba le phapang e fapaneng.

CSS Property Padding

E le hore u sebelise thepa ea shoe ea CSS ea shorthand, u ka sebelisa mongoli "TRouBLe" (kapa "TRiBbLe" bakeng sa lōna ba ratang Star Trek). Sena se eme ka holimo , ho le letona , ka tlase , le ka ho le letšehali , 'me se bua ka taelo ea bophara ba marang-rang oo u bo behileng sebakeng sa shorthand. Ka mohlala:

ho pata: holimo ka ho le letšehali ho le letšehali; ho roala: 1px 2px 3px 6px;

Haeba u sebelisitse litekanyetso tse thathamisitsoeng ka holimo, e ka sebelisa phapang e fapaneng ea marang-rang hohle ka eng kapa efe ea HTML eo u e sebelisang ho eona. Haeba o batla ho kenya marang-rang a lekanang le mahlakoreng ana a mane, o ka nolofatsa CSS ea hau mme u ngola feela boleng bo le bong:

ho roala: 12px;

Ka mola oo oa CSS, li-pixels tse 12 tsa padding li tla sebetsa likarolong tsohle tse 4 tsa ntlha.

Haeba u batla hore padding e be e tšoanang ka holimo le ka tlaase le ka ho le letšehali le ka ho le letona, o ka ngola litekanyetso tse peli:

ho pata: 24px 48px;

Bohloko ba pele (24px) bo tla sebetsa holimo le tlase, ha bobeli bo tla sebetsa ho le letšehali le ho le letona.

Haeba u ngola litekanyetso tse tharo, seo se tla etsa hore ho behoa ho holimo ho le letona (ho le letšehali le ho le letona) ho le joalo, ha u ntse u fetola holimo le ka tlaase:

ho roala holimo: holimo ho le letona ho le letšehali; ho penya: 0px 1px 3px;

Ho ea ka CSS lebokose la mohlala, ho patala ho haufi le sebopeho / sebopeho ka bobona. Sena se bolela hore ho koahela ho kenyelelitsoe ho karolo e pakeng tsa bophara bo bokaalo kapa bophahamo le mekhoa efe kapa efe ea moeli eo ue sebelisang. Haeba padding e behoa ho zero, joale e na le moeli o lekanang le tse ling.

Melao ea CSS ea Padding

CSS padding e ka nka ntho leha e le efe e se nang bobe ba bolelele. Etsa bonnete ba ho hlalosa hantle tekanyo, e kang px kapa em. U ka boela ua bolela karolo ea peresente bakeng sa padding ea hau, eo e tla ba karolo ea bophara ba sebopeho seo se nang le sona. Sena se kenyeletsa bakeng sa holimo le ka tlaase. Ka mohlala:

#container {bophara: 800px; bolelele: 200px; } #container p {bophara: 400px; bolelele: 75%; ho laola: 25% 0; }}

Sebaka se phahameng sa serapa ka hare ho sehlooho sa #container se tla ba 75% ea bophahamo ba #container hammoho le 25% ea bophara bakeng sa top padding le 25% ea bophara bakeng sa padding e ka tlaase. Sena se totara 300 + 200 + 200 = 700px.

Liphello tsa ho eketsa CSS Padding

Lintlheng tsa li-block-level , padding e sebelisoa mahlakoreng a mane. Kahobane karolo e le lebokose kapa lebokose le se le ntse le se le ntse le le teng, ho kentseha ho sebelisoa lebokoseng la lebokose.

Ha cSS padding e kenyelletsoa ho lintlheng tse ka hare , ho ka 'na ha e-ba le lintho tse ngata tse holimo holimo le ka tlaase ho karolo ea inthaneteng haeba lerata le holimo le feta bophahamo ba moeli, empa le ke ke la senya bophahamo ba moeli. Horizontal CSS padding e sebelisitsoeng ho lintlheng tse ka hare ho tla kenngoa ts'ebetsong ea ntlha le qetellong ea lintlha. 'Me padding e ka koahela mela. Empa e ke ke ea sebetsa melaong eohle ea sehlahisoa sa li-multi-line, kahoo u ke ke ua sebelisa sekhahla sa marang-rang se lekanang le karolo ea lihlahisoa tse inthaneteng tse ngata.

Hape, ho CSS2.1, ha o khone ho etsa libaka tseo ho tsona bophara bo itšetlehileng ka karolo e nang le liphesente tsa widths (kapa bophara bo boholo). Haeba u etsa sephetho ha se na moeli. Barekisi ba sa ntse ba tla bontša lintho tse ka hare, empa u ka 'na ua se ke ua fumana liphello tseo u li lebeletseng. Haeba u nahana ka eona, hoa utloahala, joalokaha eka setho sa hau sa lisebelisoa se hloka ho tseba bophara ba likarolo tsa bana ba eona e le hore se hlalose bophara ba eona-joalo ha se se na bophara bo hlalositsoeng pele, 'me se seng kapa tse ling bophara bo behiloeng e le karolo ea karolo ea lisebelisoa, sena se beha ketane ea selikalikoe se se nang karabo. Haeba o sebelisa liphesente bakeng sa bophara ba ntho leha e le efe e ngotsoeng, u lokela ho etsa bonnete ba hore karolo ea motsoali e kholo e hlalosoa hape.