Mae padio CSS yn un o eiddo'r model blwch CSS . Mae'r eiddo llaw byr hwn yn gosod y padio o amgylch pedair ochr elfen HTML. Gellir gosod padio CSS i bron pob tag HTML (ac eithrio rhai o'r tagiau tabl). Yn ogystal, gall pob un o'r pedair ochr o'r elfen gael gwerth gwahanol.
Eiddo Padio CSS
I ddefnyddio'r eiddo padio CSS llaw llaw, gallwch ddefnyddio'r "TRouBLe" mnemonig (neu "TRiBbLe" i chi gefnogwyr Star Trek). Mae hyn yn sefyll am y top , o'r dde , i'r gwaelod a'r chwith , ac mae'n cyfeirio at orchymyn y llinellau padio a osodwyd gennych yn yr eiddo llaw. Er enghraifft:
padio: ar y dde i'r chwith i'r chwith; padio: 1px 2px 3px 6px;Pe baech yn defnyddio'r gwerthoedd a restrir uchod, byddai'n golygu gwerth padio gwahanol i bob ochr o'r holl elfen HTML rydych chi'n ei gymhwyso. Os ydych chi eisiau gwneud yr un padl i bob un o'r pedair ochr, gallwch chi symleiddio eich CSS a dim ond ysgrifennu un gwerth:
padio: 12px;Gyda'r llinell honno o CSS, byddai 12 picsel o padio yn berthnasol i bob 4 ochr i'r elfen.
Os ydych chi am i'r padlo fod yr un peth ar gyfer y brig a'r gwaelod a'r chwith a'r dde, gallwch chi ysgrifennu dau wert:
padio: 24px 48px;Byddai'r gwerth cyntaf (24px) yn berthnasol i'r brig a'r gwaelod, tra byddai'r ail yn berthnasol i'r chwith a'r dde.
Os ydych chi'n ysgrifennu tri gwerthoedd, bydd hynny'n gwneud y padio llorweddol (chwith ac i'r dde) yr un peth, wrth newid y top a'r gwaelod:
padio: gwaelod ar y dde i'r dde a'r chwith; padio: 0px 1px 3px;Yn ôl y model blwch CSS, mae padio yn agos at yr elfen / cynnwys ei hun. Mae hyn yn golygu ychwanegir padlo at elfen rhwng lled neu uchder y cynnwys ac unrhyw werthoedd ffiniau a ddefnyddiwch. Os yw'r padio wedi'i osod i sero, yna mae ganddo'r un peth â'r cynnwys.
Gwerthoedd Padio CSS
Gall padio CSS gymryd unrhyw werth hyd negyddol. Cofiwch nodi'r mesuriad, fel px neu em. Gallwch hefyd nodi canran ar gyfer eich padio, a fydd yn ganran o led bloc sy'n cynnwys yr elfen. Mae hyn yn cynnwys ar gyfer padio top a gwaelod. Er enghraifft:
#container {lled: 800px; uchder: 200px; } #container p {width: 400px; uchder: 75%; padio: 25% 0; }Uchaf y paragraff y tu mewn i'r elfen #container fydd 75% o uchder #container ynghyd â 25% o'r lled ar gyfer y padio uchaf a 25% o'r lled ar gyfer y padio gwaelod. Mae hyn yn cyfansymiau 300 + 200 + 200 = 700px.
Effeithiau Ychwanegu Padding CSS
Ar elfennau lefel bloc , gosodir y padio ar y pedair ochr. Gan fod yr elfen yn floc neu flwch eisoes, mae'r padin yn cael ei gymhwyso i ochr y blwch.
Pan fydd padiau CSS yn cael eu hychwanegu at elfennau inline , efallai y bydd rhai elfennau uwchben ac islaw'r elfen mewnllin yn gorgyffwrdd os yw'r padio fertigol yn uwch na'r uchder llinell, ond ni fydd yn gwthio uchder y llinell i lawr. Bydd padio CSS llorweddol sy'n berthnasol i elfennau mewn llinell yn cael ei ychwanegu at ddechrau'r elfen a diwedd yr elfen. Ac efallai y bydd y padin yn lapio llinellau. Ond ni fydd yn berthnasol i holl linellau elfen aml-linell, felly ni allwch ddefnyddio padlo i osod rhan o gynnwys inline aml-linell.
Hefyd, yn CSS2.1, ni allwch greu blociau cynhwysydd lle mae'r lled yn dibynnu ar elfen â chanrannau ar gyfer lled (neu lledau padlo). Os gwnewch chi, mae'r canlyniad wedi'i ddiffinio. Bydd porwyr yn dal i arddangos y cynnwys, ond efallai na fyddwch chi'n cael y canlyniadau rydych chi'n eu disgwyl. Os ydych chi'n meddwl amdano, mae'n gwneud synnwyr, fel pe bai angen i'ch elfen gynhwysydd wybod lled ei elfennau plant er mwyn diffinio ei lled, fel pan nad oes ganddi lled wedi'i ddiffinio ymlaen llaw, ac mae gan un neu fwy ohonynt gosodir lled fel canran o'r elfen gynhwysydd, mae hyn yn gosod cadwyn cylchol heb unrhyw ateb. Os ydych chi'n defnyddio canrannau ar gyfer lled unrhyw beth ar eich dogfen, dylech sicrhau bod lled yr elfen rhiant hefyd yn cael ei ddiffinio.