CSS užpildymas yra viena iš CSS dėžutės modelis. Ši trumpo savybė nustato užpildą aplink visas keturias HTML elemento puses. CSS užpildą galima pritaikyti beveik kiekvienam HTML žyma (išskyrus kai kurias lentelės žymas). Be to, visos keturios elemento pusės gali turėti skirtingą vertę.
CSS užpildymo nuosavybė
Jei norite naudoti trumpojo CSS užpildymo ypatybę, galite naudoti atmintinę „TRouBLe“ (arba „TRiBbLe“, skirtą „Star Trek“ gerbėjams). Tai reiškia viršuje, teisingai, dugnasir paliko, ir tai nurodo užpildymo pločių tvarką, kurią nustatote ypatybėje „stenografija“. Pavyzdžiui:
paminkštinimas: viršuje dešinėje apačioje kairėje;
užpildymas: 1px 2px 3px 6px;
Jei naudojote aukščiau išvardytas reikšmes, kiekvienam HTML elemento, kuriam jį taikote, kiekvienai pusei bus taikoma skirtinga užpildymo vertė. Jei norite tą patį pamušalą uždėti ant visų keturių pusių, galite supaprastinti savo CSS ir tiesiog parašykite vieną vertę:
užpildas: 12 taškų;
Naudojant tą CSS eilutę, 12 taškų užpildas bus pritaikytas visoms 4 elemento pusėms.
Jei norite, kad viršutinė ir apatinė bei kairė ir dešinė dalys būtų vienodos, galite parašyti dvi reikšmes:
užpildymas: 24px48px;
Pirmoji vertė (24 taškų) bus taikoma viršuje ir apačioje, o antroji reikšmė - kairėje ir dešinėje.
Jei parašysite tris reikšmes, horizontalieji užpildai (kairieji ir dešinieji) taps vienodi keičiant viršutinę ir apatinę dalis:
paminkštinimas: viršuje dešinėje ir kairėje apačioje;
užpildymas: 0px 1px 3px;
Pagal CSS dėžutės modelį užpildas yra arčiausiai paties elemento / turinio. Tai reiškia, kad užpildas pridedamas prie elemento tarp turinio pločio ar aukščio ir visų naudojamų krašto verčių. Jei užpildymas nustatytas į nulį, jis turi tą patį kraštą kaip ir turinys.
CSS užpildymo vertės
CSS užpildymas gali turėti bet kokią neigiamą ilgio vertę. Būtinai nurodykite matavimą, pvz., Px arba em. Taip pat galite nurodyti užpildo procentą, kuris bus elemento, kuriame yra bloko, pločio procentas. Tai apima viršutinį ir apatinį kamšalus. Pavyzdžiui:
#container {plotis: 800px; aukštis: 200 taškų; }
#container p {plotis: 400px; aukštis: 75%; užpildas: 25% 0; }
ūgio pastraipos viduje # konteineris elementas bus 75% # konteineris25% pločio viršutiniam kamšteliui ir 25% pločio apatiniam paminkštinimui. Tai yra 300 + 200 + 200 = 700 taškų.
CSS užpildymo pridėjimo poveikis
Įjungta bloko lygio elementai, paminkštinimas dedamas iš keturių pusių. Kadangi elementas jau yra blokas ar dėžutė, paminkštinimas taikomas dėžutės šonuose.
Kai CSS užpildas pridedamas prie įterpti elementai, gali būti tam tikrų elementų sutapimų, esančių virš ir žemiau įterptojo elemento, jei vertikalus paminkštinimas viršija linijos aukštį, tačiau linijos aukštis nebus pastumtas žemyn. Horizontalus CSS užpildas, pritaikytas įterptiems elementams, bus pridėtas prie elemento pradžios ir elemento pabaigos. Ir paminkštinimas gali apvynioti linijas. Bet tai nebus taikoma visoms kelių eilučių elemento eilutėms, todėl negalite naudoti užpildo, kad įtrauktumėte kelių eilučių eilučių turinio segmentą.
Be to, CSS2.1 versijoje negalite sukurti sudėtinių rodinių blokų, kurių plotis priklauso nuo elemento, kurio plotis (arba užpildo plotis) yra procentais. Jei tai padarysite, rezultatas nėra apibrėžtas. Naršyklės vis tiek rodys turinį, tačiau galite nepasiekti laukiamų rezultatų. Jei pagalvotumėte, prasminga, tarsi jūsų sudėtinio rodinio elementas, norėdamas apibrėžti jo plotį, turi žinoti antrinių elementų plotį, pvz., kai jis neturi iš anksto nustatyto pločio, o vienas ar daugiau turi plotį, nurodytą procentais nuo konteinerio elemento, tai sukuria apskritą grandinę be atsakyti. Jei naudojate procentus bet kokio dokumento pločio atžvilgiu, turėtumėte įsitikinti, kad apibrėžti ir pirminio elemento plotiai.