CSS- padding is ien fan 'e eigenskippen fan it CSS-faksmodel . Dizze skiednis fan 'e koartsicht pleatst de padding om alle fjouwer siden fan in elemint elemint. CSS-padding kin tapast wurde oan hast eltse HTML-tag (útsein inkele fan de tabelkanten). Boppedat kinne alle fjouwer kaarten fan it elemint in oare wearde hawwe.
CSS Padding Property
Om de kâns op CSS-padding te brûken, kinne jo de mnemonike "TRouBLe" (of "TRiBbLe" foar jo Star Trek fans) brûke. Dit stiet foar top , rjochts , boaiem , en lofts , en it ferwiist nei de oarder fan de paddingbreeds dy't jo yn 'e koartsjûne eigenskip sette. Bygelyks:
padding: top rjochts boppe links; padding: 1px 2px 3px 6px;As jo de hjirboppe neamde wearden brûke, soe it in oare paddingwearde oan elke kant fan elke HTML-elemint tapasse dy't jo it oanfreegje. As jo alle fjouwer siden itselde padding tapasse wolle, kinne jo jo CSS ferienfâldigje en inkele wearde skriuwe:
padding: 12px;Mei dizze line fan CSS soe 12 piksels fan padding tapast wurde foar alle 4 kanten fan it elemint.
As jo wolle dat de padding itselde foar de top en ûndergrûn en lofts en rjochts is, kinne jo twa wearden skriuwe:
padding: 24px 48px;De earste wearde (24px) soe tapast wurde oan 'e boppekant en ûnderen, wylst de twadde pleatst foar links en rjochts.
As jo trije wearden skriuwe, sil it horizontale padding (lofts en rjochts) itselde meitsje, wylst de top en de wiksel feroarje:
padding: top-left-bottom bottom; padding: 0px 1px 3px;Neffens it CSS faksmodel is it padding it tichtst by it elemint / ynhâld sels. Dit betsjuttet dat padding oan ien elemint tafoege wurdt tusken tusken de ynhâldbreedte of hichte en alle grinswearden dy jo brûke. As it padding op nul set wurdt, dan hat it deselde kant as de ynhâld.
CSS Padding Werjeften
CSS padding kin elke non-negative lingtewearde nimme. Soargje derfoar dat de mjitting oanjûn is, lykas px of em. Jo kinne ek in persintaazje opjaan foar jo padding, dy't in persintaazje fan 'e breedte fan it elemint is mei blok. Dit omfetsje foar top en bottom padding. Bygelyks:
#container {breed: 800px; hichte: 200px; } #container p {breed: 400px; hichte: 75%; padding: 25% 0; }De hichte fan 'e paragraaf yn' e elemint fan #container sil 75% fan 'e hichte yn' e hichte wêze fan 25% fan 'e breedte foar de boppe padding en 25% fan' e breedte foar de boaiem padding. Dizze totale 300 + 200 + 200 = 700px.
Effekten fan tafoegje CSS Padding
Op blokje-eleminten wurdt de padding tapast op de fjouwer kanten. Om't it elemint al in blok of al kast is, wurdt de padding tapast oan de keatsiden.
As CSS padding tafoegje oan ynline-eleminten , kin der in pear oerlappen fan eleminten boppe en ûnder it ynline-elemint wêze as it fertikale padding de linehichte grutter hat, mar it sil de linehichte net drukke. Horizontale CSS-padding dy't tapast wurdt op ynline-eleminten sil oan it begjin fan it elemint en it ein fan it elemint tafoege wurde. En de padding kin wizigje. Mar it sil net foar alle rigels fan in multy-line elemint tapasse, sadat jo gjin padding brûke kinne, om in segmint fan meardere line ynline ynhâld te brûken.
Ek yn CSS2.1 kinne jo gjin kontakblokken meitsje wêrtroch de breedte hinget fan in elemint mei persintaazjes foar breedten (of paddingbreeds). As jo it resultaat dogge is net definiearre. Browsers sil de ynhâld dochs noch sjen, mar jo kinne miskien net de resultaten dy't jo ferwachtsje. As jo tinke oer it, makket it sin, as jo jo container elemint de breedte fan syn berneleminte kenne om 'e breedte te definiearjen - sa as it net in fêste definysje is, en ien of mear hat In breed opset as in persintaazje fan it container elemint, dit stelt in sirkulêre ketting mei gjin antwurd. As jo persintaazjes brûke foar breedtes fan alles op jo dokumint, moatte jo derfoar soargje dat de parentele elemintenbreedten ek definiearre binne.