Bwochi Apèsi sou CSS Padding

CSS padding se youn nan pwopriyete modèl bwat CSS la . Sa a pwopriyete Shorthand kouche padding a alantou tout kote kat nan yon eleman HTML. CSS padding ka aplike nan prèske tout tag HTML (eksepte pou kèk nan tags yo tab). Anplis, tout kat eleman yo ka gen yon valè diferan.

CSS padding pwopriyete

Pou itilize siyman CSS padding pwopriyete a, ou ka itilize mnemonic "TRouBLe" (oswa "TRiBbLe" pou ou fanatik charyo Star). Sa a kanpe pou tèt , dwat , anba , ak bò gòch , epi li refere a lòd la Widths yo padding ou mete nan pwopriyete a steno. Pa egzanp:

padding: tèt dwat anba gòch; padding: 1px 2px 3px 6px;

Si ou itilize valè yo ki endike anwo a, li ta aplike yon valè padding diferan nan tout bò nan tou sa eleman HTML ou ap aplike li nan. Si ou vle aplike padding a menm nan tout kat kote, ou ka senplifye CSS ou ak jis ekri yon sèl valè:

padding: 12px;

Avèk liy lan CSS, 12 piksèl padding ta aplike nan tout 4 pati nan eleman an.

Si ou vle padding a yo dwe menm bagay la pou tèt la ak anba ak bò gòch ak dwa, ou ka ekri de valè:

padding: 24px 48px;

Premye valè a (24px) ta aplike nan tèt la ak anba, pandan y ap dezyèm lan ta aplike sou bò gòch la ak dwa.

Si ou ekri twa valè, ki pral fè padding orizontal (agòch ak adwat) menm bagay la tou, pandan y ap chanje tèt la ak anba:

padding: tèt anba-anba-dwa; padding: 0px 1px 3px;

Dapre modèl la bwat CSS, padding ki pi pre eleman / kontni an tèt li. Sa vle di ke padding se ajoute nan yon eleman nan ant lajè wotè oswa wotè ak nenpòt valè fwontyè ou itilize. Si se padding a mete a zewo, Lè sa a, li gen kwen an menm jan ak kontni an.

CSS Valè Valè

CSS padding ka pran nenpòt ki valè negatif ki pa negatif. Asire ou ke ou presize mezi a, tankou px oswa em. Ou ka presize tou yon pousantaj pou padding ou, ki pral yon pousantaj nan lajè eleman ki gen blòk. Sa a gen ladan pou tèt ak anba padding. Pa egzanp:

# kontwa {lajè: 800px; wotè: 200px; } # kontni p {lajè: 400px; wotè: 75%; padding: 25% 0; }}

Wotè paragraf la andedan eleman # kontni an pral 75% nan wotè # kontwa a plis 25% nan lajè a pou padding an tèt yo ak 25% nan lajè a pou anba a padding. Sa a total 300 + 200 + 200 = 700px.

Efè Ajoute CSS padding

Sou eleman blòk-nivo , se padding a aplike sou kat kote sa yo. Paske eleman an se yon blòk oswa bwat deja, se padding a aplike nan kote sa yo bwat.

Lè se CSS padding ajoute nan eleman alimèt , gen pouvwa gen kèk sipèpoze nan eleman pi wo a ak anba a eleman an inline si padding vètikal la depase wotè liy lan, men li pa pouse wotè liy lan desann. Orizontal CSS padding aplike nan eleman inline yo pral ajoute nan kòmansman an nan eleman an ak nan fen eleman an. Ak padding a ka vlope liy yo. Men, li pa pral aplike nan tout liy nan yon eleman milti-liy, kidonk, ou pa ka itilize padding endep yon segman nan milti-liy kontni anlinè.

Epitou, nan CSS2.1, ou pa ka kreye blòk veso kote lajè a depann sou yon eleman ak pousantaj pou lajè (oswa widje padding). Si ou fè rezilta a se endefini. Navigatè ap toujou afiche sa ki, men ou ka pa jwenn rezilta ou ap tann. Si ou panse sou li, li fè sans, tankou si eleman veso ou a bezwen konnen lajè eleman pitit li yo nan lòd yo defini lajè li yo-tankou lè li pa gen yon lajè pre-defini, ak youn oswa plis gen yon lajè mete kòm yon pousantaj nan eleman an veso, sa a kouche moute yon chèn sikilè ki pa gen okenn repons. Si ou itilize pousantaj pou lajè nan anyen sou dokiman ou, ou ta dwe asire w ke eleman lajè eleman yo tou defini.