CSS padding is een van die eienskappe van die CSS-boksmodel . Hierdie korthandige eienskap stel die padding rondom al vier kante van 'n HTML-element. CSS padding kan toegepas word op byna elke HTML-tag (behalwe vir sommige van die tabel etikette). Daarbenewens kan al vier sye van die element 'n ander waarde hê.
CSS Padding Property
Om die korthandige CSS padding-eiendom te gebruik, kan jy die Mnemonic "TRouBLe" (of "TRiBbLe" vir jou Star Trek-ondersteuners gebruik). Dit staan voor bo , reg , onder en links , en dit verwys na die volgorde van die wydte wat jy in die korthandige eiendom het. Byvoorbeeld:
vulling: bo regs onder links; padding: 1px 2px 3px 6px;As u die bostaande waardes gebruik het, sal dit 'n ander paddingwaarde aan elke kant van enige HTML-element waarop u dit toepas, toepas. As jy dieselfde vierkant aan al vier kante wil toepas, kan jy jou CSS vereenvoudig en net een waarde skryf:
vulling: 12px;Met die lyn van CSS, sou 12 pixels van vulling op al 4 kante van die element van toepassing wees.
As jy wil hê dat die padding dieselfde is vir die bo en onder, en links en regs, kan jy twee waardes skryf:
vulling: 24px 48px;Die eerste waarde (24px) sal van toepassing wees op die bo en onder, terwyl die tweede van toepassing is op die linker en regterkant.
As jy drie waardes skryf, sal dit die horisontale padding (links en regs) dieselfde maak, terwyl die bo en onder verander word:
vulling: bo regs en links onder; vulling: 0px 1px 3px;Volgens die CSS-boksmodel is padding die naaste aan die element / inhoud self. Dit beteken dat die opvulling bygevoeg word aan 'n element tussen die inhoud breedte of hoogte en enige grenswaardes wat u gebruik. As die opvulling op nul gestel is, dan het dit dieselfde rand as die inhoud.
CSS Padding Waardes
CSS padding kan enige nie-negatiewe lengte waarde neem. Maak seker dat jy die meting, soos px of em, spesifiseer. U kan ook 'n persentasie spesifiseer vir u opvulling, wat 'n persentasie van die breedte van die element se blok sal wees. Dit sluit in vir bo- en ondervulling. Byvoorbeeld:
# container {width: 800px; hoogte: 200px; } # container p {width: 400px; hoogte: 75%; vulling: 25% 0; }Die hoogte van die paragraaf in die # container- element sal 75% van die hoogte van die #container wees plus 25% van die breedte vir die boonste padding en 25% van die breedte vir die onderste padding. Dit bedraagt 300 + 200 + 200 = 700px.
Effekte van die byvoeging van CSS Padding
Op blokvlakelemente word die polswerk aan die vier kante toegepas. Omdat die element reeds 'n blok of 'n boks is, word die opvulling op die boks se kante toegepas.
Wanneer CSS-opvulling by inlyn-elemente gevoeg word, kan daar oorvleueling van elemente bo en onder die inlynelement wees as die vertikale vulling die lynhoogte oorskry, maar dit sal nie die lynhoogte af druk nie. Horisontale CSS padding toegepas op inlyn elemente sal bygevoeg word aan die begin van die element en die einde van die element. En die padding kan lyne wikkel. Maar dit sal nie van toepassing wees op alle lyne van 'n multi-lyn-element nie, dus jy kan nie die opskrif gebruik om 'n segment van multi-line inline inhoud in te sluit nie.
Ook in CSS2.1 kan jy nie houerblokke skep waar die breedte afhang van 'n element met persentasies vir breedtes (of wydte van die pols) nie. As jy dit doen, is die resultaat onbepaald. Browsers sal steeds die inhoud vertoon, maar u mag nie die resultate kry wat u verwag nie. As jy daaraan dink, is dit sinvol, asof jou houerelement die wydte van sy kindelemente moet ken om sy wydte te definieer, soos wanneer dit nie 'n vooraf gedefinieerde breedte het nie en een of meer het 'n Wydte wat as 'n persentasie van die houerelement gestel word, stel 'n sirkelvormige ketting op sonder antwoord. As jy persentasies vir wydtes van enigiets op jou dokument gebruik, moet jy seker maak dat die ouerelementwydtes ook gedefinieer word.