CSS-täyte on yksi CSS-laatikkomalli. Tämä lyhytominaisuus asettaa täytteen HTML-elementin kaikkien neljän sivun ympärille. CSS-täytettä voidaan käyttää melkein jokaiseen HTML-tunniste (lukuun ottamatta joitain taulukon tunnisteita). Lisäksi elementin kaikilla neljällä puolella voi olla erilainen arvo.
CSS-täyteominaisuus
Voit käyttää lyhyt CSS-täyteominaisuutta käyttämällä muistin "TRouBLe" (tai "TRiBbLe" sinulle Star Trek -faneille). Tämä tarkoittaa alkuun, oikein, pohjassaja vasemmalle, ja se viittaa lyhennysominaisuudessa asettamiesi täyteleveyksien järjestykseen. Esimerkiksi:
pehmuste: oikea ylhäältä alhaalta vasemmalta;
pehmuste: 1px 2px 3px 6px;
Jos käytit yllä lueteltuja arvoja, se käyttää eri täyte-arvoa HTML-elementin joka puolelle, johon sitä käytät. Jos haluat käyttää samaa pehmustetta kaikille neljälle puolelle, voit yksinkertaistaa CSS ja kirjoita vain yksi arvo:
täyte: 12px;
Tällä CSS-rivillä 12 pikseliä täytettäisi elementin kaikkiin neljään sivuun.
Jos haluat, että pehmuste on sama ylhäältä ja alhaalta sekä vasemmalta ja oikealta, voit kirjoittaa kaksi arvoa:
täyte: 24px 48px;
Ensimmäistä arvoa (24 kuvapistettä) sovelletaan ylä- ja alaosaan, kun taas toista vasempaan ja oikeaan.
Jos kirjoitat kolme arvoa, vaakasuora pehmuste (vasen ja oikea) on sama samalla kun vaihdat ylä- ja alaosaa:
pehmuste: oikea ja vasen ylä-alaosa;
täyte: 0px 1px 3px;
CSS-laatikkomallin mukaan pehmuste on lähinnä itse elementtiä / sisältöä. Tämä tarkoittaa, että täyte lisätään elementtiin sisällön leveyden tai korkeuden ja käyttämiesi reunusarvojen väliin. Jos täyte on asetettu nollaksi, sillä on sama reuna kuin sisällöllä.
CSS-täytteen arvot
CSS-täyte voi ottaa minkä tahansa ei-negatiivisen pituusarvon. Muista määrittää mittaus, kuten px tai em. Voit myös määrittää täytteelle prosenttiosuuden, joka on prosenttiosuus elementin sisältävän lohkon leveydestä. Tähän sisältyy ylä- ja alaosa. Esimerkiksi:
#container {leveys: 800px; korkeus: 200px; }
#container p {leveys: 400px; korkeus: 75%; pehmuste: 25% 0; }
korkeus kohdan sisällä #kontti alkuaine on 75% #kontti’Korkeus plus 25% yläpehmusteen leveydestä ja 25% alemman pehmusteen leveydestä. Tämä on yhteensä 300 + 200 + 200 = 700 kuvapistettä.
CSS-täytteen lisäämisen vaikutukset
Päällä lohkotason elementit, pehmuste levitetään neljälle sivulle. Koska elementti on jo lohko tai laatikko, pehmustetta käytetään laatikon sivuihin.
Kun CSS-täyte lisätään inline-elementit, sisäelementin ylä- ja alapuolella voi olla jonkin verran päällekkäisyyksiä, jos pystypehmuste ylittää viivan korkeuden, mutta se ei työnnä viivan korkeutta alaspäin. Inline-elementteihin käytetty vaakasuora CSS-täyte lisätään elementin alkuun ja elementin loppuun. Ja pehmuste voi kietoa viivoja. Mutta se ei koske kaikkia monirivisen elementin rivejä, joten et voi käyttää täytettä lohkomaan monirivisen sisäisen sisällön segmentti.
CSS2.1: ssä ei myöskään voi luoda säilölohkoja, joissa leveys riippuu elementistä, jonka leveys (tai täyteleveys) on prosentteina. Jos teet, tulos on määrittelemätön. Selaimet näyttävät edelleen sisällön, mutta et välttämättä saa odotettuja tuloksia. Jos ajattelet sitä, on järkevää, ikään kuin konttielementtisi olisi tiedettävä alielementtien leveys määritettäessä sen leveys - kuten kun sillä ei ole ennalta määritettyä leveyttä ja yhdelle tai useammalle leveys on asetettu prosenttiosuutena konttielementistä, tämä muodostaa pyöreän ketjun ilman vastaus. Jos käytät prosenttiosuuksia minkä tahansa asiakirjan leveydelle, varmista, että myös ylätason leveydet on määritelty.