Mubo nga Kasinatian sa CSS Padding

Ang CSS padding usa sa mga kabtangan sa CSS box model . Kining takus nga kabtangan nagbutang sa padding libut sa tanang upat ka bahin sa usa ka elemento sa HTML. Ang CSS padding mahimong magamit sa halos matag tag sa HTML (gawas sa pipila sa mga tag sa lamesa). Dugang pa, ang tanang upat ka bahin sa elemento adunay lainlaing bili.

CSS Padding Property

Aron gamiton ang shorthand CSS padding property, mahimo nimo gamiton ang mnemonic "TRouBLe" (o "TRiBbLe" alang kanimo Star Trek fans). Kini nagbarug alang sa ibabaw , tuo , ubos , ug wala , ug kini nagtumong sa han-ay sa gilapdon nga padding nga imong gipahimutang sa takus nga kabtangan. Pananglitan:

padding: ibabaw sa ibabaw sa tuo sa wala; padding: 1px 2px 3px 6px;

Kung gigamit nimo ang mga bili nga gilista sa ibabaw, kini magamit sa usa ka lainlaing padding nga bili sa tanang bahin sa bisan unsang elemento sa HTML nga imong gipadapat niini. Kung gusto nimo gamiton ang sama nga padding sa tanan nga upat ka kilid, mahimo nimong mapasimple ang imong CSS ug isulat ang usa ka bili:

padding: 12px;

Uban niana nga linya sa CSS, 12 ka pixel sa padding ang magamit sa tanang 4 nga bahin sa elemento.

Kung gusto nimo nga ang padding parehas alang sa ibabaw ug sa ubos ug sa wala ug tuo, makasulat ka og duha ka mga hiyas:

padding: 24px 48px;

Ang unang bili (24px) magamit sa ibabaw ug sa ubos, samtang ang ikaduha magamit sa wala ug tuo.

Kung nagsulat ka sa tulo ka mga bili, kana maghimo sa pinahigda nga padding (wala ug tuo) sama sa pag-usab sa ibabaw ug sa ubos:

padding: ibabaw nga tuo ug wala nga ubos; padding: 0px 1px 3px;

Sumala sa CSS box model, ang padding mao ang labing duol sa elemento / sulod mismo. Kini nagpasabot nga ang padding gidugang sa usa ka elemento sa tunga-tunga sa lapad nga gitas-on o gitas-on sa sulod ug sa bisan unsang mga bili nga imong gigamit. Kon ang padding gibutang sa zero, nan kini adunay sama nga sulud sa sulod.

CSS Padding Values

Ang CSS padding makahimo sa bisan unsang dili-negatibo nga gitas-on nga gitas-on. Siguroha ang pagsulti sa sukod, sama sa px o em. Mahimo usab nga mahibal-an ang usa ka porsyento alang sa imong padding, nga usa ka porsyento sa gilapdon sa elemento nga adunay bloke. Naglakip kini alang sa ibabaw ug sa ubos padding. Pananglitan:

#container {width: 800px; gitas-on: 200px; } #container p {width: 400px; gitas-on: 75%; padding: 25% 0; }

Ang gitas-on sa parapo sulod sa #container elemento mao ang 75% sa #container 's height plus 25% sa gilapdon alang sa ibabaw nga padding ug 25% sa gilapdon alang sa ubos padding. Kini adunay total nga 300 + 200 + 200 = 700px.

Mga Epekto sa Pagdugang sa CSS Padding

Sa block-level nga mga elemento , ang padding gipadapat sa upat ka kilid. Tungod kay ang elemento usa ka block o kahon na, ang padding gipadapat sa kahon sa kahon.

Sa diha nga ang CSS padding gidugang ngadto sa inline nga mga elemento , mahimong adunay pipila ka mga overlapping sa mga elemento sa ibabaw ug sa ubos sa inline nga elemento kung ang vertical nga padding molapas sa gitas-on sa linya, apan kini dili magduso sa gitas-on sa linya. Ang Horizontal CSS padding nga gipadapat sa inline nga mga elemento idugang sa sinugdanan sa elemento ug sa katapusan sa elemento. Ug ang padding mahimong mag-wrap sa linya. Apan kini dili magamit sa tanan nga mga linya sa usa ka elemento sa multi-line, busa dili ka magamit nga padding aron indent usa ka bahin sa multi-line inline nga sulod.

Dugang pa, sa CSS2.1, dili ka makahimo og mga bloke sa sudlanan diin ang gilapdon nagdepende sa usa ka elemento nga may mga porsyento alang sa gilapdon (o padding lapad). Kung buhaton nimo ang resulta dili matino. Ang mga Browser usab magpakita sa mga sulod, apan dili nimo makuha ang mga resulta nga imong gilauman. Kung hunahunaon mo kini, makatarunganon, ingon nga ang imong sudlanan nga sudlanan kinahanglan nga mahibal-an ang gilapdon sa mga elemento sa iyang anak aron mahibal-an ang gilapdon niini-sama sa wala kini daan nga gilapdon, ug usa o daghan ang adunay usa ka gilapdon nga gibutang ingon nga usa ka porsyento sa elemento sa sudlanan, kini naglangkob sa usa ka circular chain nga walay tubag. Kon ikaw mogamit sa mga porsiyento sa gilapdon sa bisan unsang butang sa imong dokumento, kinahanglan nga imong sigurohon nga ang lebel sa ginikanan nga elemento gihubit usab.