CSS-i täitematerjal on üks CSS-kasti mudeli omadustest. See sfääriline vara seab HTML-elemendi kõigi nelja külje paneeli. CSS-i täidistust saab rakendada peaaegu iga HTML-i märgendiga (välja arvatud mõne tabeli sildi puhul). Lisaks võib elemendi kõik neli külge olla erinevad väärtused.
CSS-i lisavarustus
Selleks, et kasutada stensooni CSS-i pindade omadust, võite kasutada mnemoonilist "TRouBLe" (või "TRiBbLe" teie Star Treki fänni jaoks). See tähistab ülemist , paremat , alt ja vasakut , ning see viitab sulgemisvariandele määratud padding laiustele. Näiteks:
padding: üleval paremal alal vasakule; padding: 1px 2px 3px 6px;Kui kasutasite ülaltoodud väärtusi, rakendaks see mõnda erinevat HTML-elemendi, millele te seda kohaldate, igale küljele teistsugust asendust. Kui soovite kasutada ühte ja sama pinda kõigile neljale küljele, saate oma CSS-i lihtsustada ja lihtsalt kirjutada ühe väärtuse:
padding: 12px;Selle CSS-i joonega on elemendi kõigi nelja külje suhtes kohaldatav 12 pikslit.
Kui soovite, et padjad oleksid üla- ja ala ning vasakule ja paremale ühesugused, saate kirjutada kahte väärtust:
padding: 24px 48px;Esimene väärtus (24 pikslit) kehtib ülemise ja alumise osa suhtes, teine aga vasakule ja paremale.
Kui sisestate kolm väärtust, muudab horisontaalne polster (vasakule ja paremale) sama, ülemise ja alumise muutmise korral:
polsterdus: ülemine parem- ja vasakpoolne ala; padding: 0px 1px 3px;CSS-i kasti mudeli järgi on padding kõige lähedasem element / sisu ise. See tähendab, et elemendi lisatakse laienduse või kõrguse ja kõigi kasutatavate piirväärtuste vahele. Kui padding on seatud nulli, siis on sellel sama sisu kui serv.
CSS padding values
CSS-i polster võib võtta mis tahes mitte-negatiivse pikkuse väärtuse. Täpsustage mõõtmed, näiteks px või em. Saate määrata ka oma padja protsendi, mis on protsent elemendi sisaldava ploki laiusest. See hõlmab pealmise ja alumise padja. Näiteks:
#container {width: 800px; kõrgus: 200 pikslit; } #container p (laius: 400 px; kõrgus: 75%; polster: 25% 0; }#container- elemendi kõrgus on 75% #containeri kõrgusest, pluss 25% ülemise polsteri laiusest ja 25% alumise polsterduse laiusest. See on kokku 300 + 200 + 200 = 700px.
CSS-i lisamise mõjud
Bloki tasandi elementidel rakendatakse polsterit nelja külje kohta. Kuna element on juba plokk või kasti, paigaldatakse kile küljele polster.
Kui sisseehitatud elementidesse lisatakse CSS- klapp , võib elementide ülejääk ja sisemine elementide kattumine mõnevõrra kattuda, kui vertikaalne polster ületab joonekõrgust, kuid see ei tõsta joone kõrgus alla. Elemendi alguses ja elemendi lõpus lisatakse horisontaalset CSS-klappi, mida rakendatakse inline elementidele. Ja padjapaber võib lainete vahele jääda. Kuid seda ei kohaldata mitmerealise elemendi kõikide ridade suhtes, seega ei saa mitme rida sisestatud sisu segmendi sisestamiseks kasutada polstrit.
Samuti ei saa CSS2.1-s luua konteineriplokke, mille laius sõltub elemendist, mille protsentides on laius (või laienduse laiendused). Kui teete tulemust, on see määratlemata. Brauserid näevad endiselt sisu, kuid te ei pruugi saada tulemusi, mida ootate. Kui te seda mõelda, on see mõttekas, nagu oleks teie konteineri elemendil vaja oma laiuse defineerimiseks oma poeelementide laiust, näiteks siis, kui sellel ei ole eelnevalt määratletud laiust, ja üks või mitu konteinerielemendi protsentuaalne kogus, luuakse sellega ringikujuline kett, millel pole vastust. Kui kasutate oma dokumendis midagi muud kui protsent, peate veenduma, et põhielemendi laiused on samuti määratletud.