CSS užpildas yra viena iš CSS dėžės modelio savybių. Ši stenografinė nuosavybė nustato polinkį visose keturiose HTML elemento pusėse. CSS užpildymas gali būti taikomas beveik kiekvienai HTML žymei (išskyrus kai kurias lentelės žymes). Be to, visos keturios elemento pusės gali turėti kitą reikšmę.
CSS užpildymo turtas
Jei norite naudoti santrumpos CSS padengimo savybę, galite naudoti mnemoninį "TRouBLe" (arba "TRiBbLe" jūsų "Star Trek" gerbėjams). Tai reiškia viršuje , dešinėje , apačioje ir kairėje , o tai nurodo slydimo savybėje nustatytą paddingo pločio tvarką. Pavyzdžiui:
užpildas: viršutinė dešinė apatinė kairė; padding: 1px 2px 3px 6px;Jei naudojate aukščiau išvardytas reikšmes, jis taikytų skirtingą įklijuotą reikšmę bet kuriam HTML elementui, prie kurio jūs jį taikote. Jei norite taikyti tą patį užpildą visoms keturioms pusėms, galite supaprastinti CSS ir tiesiog parašyti vieną vertę:
padding: 12px;Naudojant šią CSS eilutę, 12 pikselių įklijavimas būtų taikomas visoms 4 elemento pusėms.
Jei norite, kad užpildas būtų toks pat, kaip viršutinis ir apatinis bei kairysis ir dešinys, galite parašyti dvi reikšmes:
padding: 24px 48px;Pirmoji vertė (24 piksel.) Būtų taikoma viršutinei ir apačioje, o antroji - į kairę ir į dešinę.
Jei rašysite tris vertes, horizontalus padėjimas (kairėn ir dešinysis) bus toks pats, keičiant viršutinę ir apatinę puses:
užpildas: viršutinė dešinė ir kairė apačia; padding: 0px 1px 3px;Pagal CSS dėžės modelį, užpildas yra arčiausiai paties elemento / turinio. Tai reiškia, kad tarpas tarp turinio pločio arba aukščio ir bet kokių naudojamų jūsų sienos verčių papildo polsterį. Jei įklijavimas nustatytas nuliui, jis turi tokią pačią pranašumą kaip ir turinys.
CSS padengimo vertės
CSS užpildas gali užtrukti bet kokią neigiamą ilgio vertę. Būtinai nurodykite matavimą, pvz., Px arba em. Taip pat galite nurodyti procentą jūsų užpildo, kuris bus bloko elemento pločio procentas. Tai apima viršutinę ir apatinę dangą. Pavyzdžiui:
#container (width: 800px; aukštis: 200 pikselių; } #container p (width: 400px; aukštis: 75%; padengimas: 25% 0; }" #container" elemento viduje aukštis bus 75% #container aukščio, plius 25% viršutinės padangos pločio ir 25% apatinės padangos pločio. Tai yra 300 + 200 + 200 = 700px.
CSS įklijavimo pridėjimo poveikis
Ant bloko lygio elementų padanga dedama ant keturių pusių. Kadangi elementas jau yra blokas ar dėžė, pamušalas taikomas dėžutės pusėms.
Kai CSS užpildas pridedamas prie inline elementų , gali būti tam tikrų elementų sutapimas virš ir žemiau vidinio elemento, jei vertikalus užpildas viršija linijos aukštį, tačiau jis neužstos linijos aukščio. Horizontalusis CSS padengimas, taikomas elementams, bus įtrauktas į elemento pradžią ir elemento pabaigą. Ir polsteris gali apvynioti linijas. Tačiau tai netaikoma visoms kelių eilučių elementų eilutėms, taigi negalėsite naudoti įklijuoti, kad įtrauktumėte daugialypio įterptinio turinio segmentą.
Be to, CSS2.1, jūs negalite kurti konteinerių blokų, kurių plotis priklauso nuo elemento, kurio procentais yra plotis (ar padengimo plotis). Jei padarysite rezultatą, tai neapibrėžta. Naršyklės vis tiek rodys turinį, bet jūs negalėsite gauti rezultatų, kuriuos tikitės. Jei apie tai galvojote, tai prasminga, tarsi jūsų konteinerio elementui reikia žinoti jo vaiko elementų plotį, kad būtų apibrėžtas jo plotis, pavyzdžiui, kai jis neturi iš anksto nustatyto pločio, ir vienas ar daugiau turi plotis, nustatytas kaip konteinerio elemento procentinė dalis, sukuriama apskrito grandine be atsakymo. Jei naudodamiesi dokumentais naudojate procentus už bet kurio dokumento plotį, turėtumėte įsitikinti, kad taip pat apibrėžta pagrindinio elemento plotis.