CSS- tyyny on yksi CSS- laatumallin ominaisuuksista. Tämä pikatoimitusominaisuus asettaa pehmusteita HTML-elementin kaikkien neljän puolen ympärille. CSS-pehmusteita voidaan soveltaa lähes jokaiseen HTML-tunnisteeseen (lukuunottamatta joitain taulukon tunnisteita). Lisäksi elementin kaikilla neljällä sivulla voi olla erilainen arvo.
CSS: n täyttöominaisuus
Voit käyttää stenografista CSS-padding-ominaisuutta käyttämällä mnemoton "TRouBLe" (tai "TRiBbLe" sinulle Star Trek fanit). Tämä tarkoittaa ylhäältä , oikealta , alhaalta ja vasemmalta , ja se viittaa pikselin ominaisuuksiin asetettujen pehmusteiden leveyden järjestykseen. Esimerkiksi:
pehmuste: ylhäällä oikealla alhaalla vasemmalla; pehmuste: 1px 2px 3px 6px;Jos käytit edellä mainittuja arvoja, se käyttää eri padding-arvoa minkä tahansa HTML-elementin jokaiselle puolelle, jota käytät. Jos haluat käyttää samaa pehmusteita kaikilla neljällä sivulla, voit yksinkertaistaa CSS: ää ja kirjoittaa vain yhden arvon:
pehmuste: 12px;Tämän CSS-rivin kanssa 12 pikseliä täyttöä olisi sovellettava elementin kaikkiin 4 puoleen.
Jos haluat, että pehmuste on sama ylä- ja alapuolelle sekä vasemmalle ja oikealle, voit kirjoittaa kaksi arvoa:
pehmuste: 24px 48px;Ensimmäinen arvo (24px) koskisi ylhäältä ja alhaalta, kun taas toinen sovellu vasemmalle ja oikealle.
Jos kirjoitat kolme arvoa, jotka tekevät horisontaalisen pehmusteiden (vasemmalla ja oikealla) samalla, kun vaihdat ylä- ja alaosaa:
pehmuste: ylhäällä oikealla ja vasemmalla alhaalla; pehmuste: 0px 1px 3px;CSS-laatumallin mukaan pehmuste on lähinnä elementtiä / sisältöä itsessään. Tämä tarkoittaa, että pehmuste lisätään elementtiin sisällön leveyden tai korkeuden ja käytettävien raja-arvojen välillä. Jos pehmuste on nollattu, sillä on sama reunus kuin sisältö.
CSS-täyttöarvot
CSS-pehmuste voi olla mikä tahansa ei-negatiivinen pituusarvo. Muista määrittää mittaus, kuten px tai em. Voit myös määrittää prosenttiosuuden pehmusteelle, joka on prosenttiosuus elementin lohkon leveydestä. Tämä sisältää ylä- ja alareunat. Esimerkiksi:
#container {leveys: 800px; korkeus: 200px; } #container p {width: 400px; korkeus: 75%; pehmuste: 25% 0; }#container -elementin sisällä olevan kappaleen korkeus on 75% #containerin korkeudesta, plus 25% ylimmän pehmusteiden leveydestä ja 25% leveydestä pohjapaneelille . Tämä yhteensä 300 + 200 + 200 = 700px.
CSS-tyynyjen lisäämisen vaikutukset
Lohkotason elementteihin pehmuste on levitetty neljällä sivulla. Koska elementti on jo lohko tai laatikko, pehmuste on sovitettu laatikkoihin.
Kun CSS-pehmuste lisätään rivielementteihin, elementtejä voi olla päällekkäisiä elementtien ylä- ja alapuolella, jos pystysuora pehmuste ylittää rivin korkeuden, mutta se ei työnnä rivin korkeutta alaspäin. Inline-elementeihin kohdistuva horisontaalinen CSS-tyyny lisätään elementin alkuun ja elementin loppuun. Pehmuste voi kääriä viivoja. Mutta sitä ei sovelleta kaikkiin monilinjaisen elementin riviin, joten et voi käyttää pehmusteita monisillan sisäisen sisällön segmentin sijoitteluun.
Myöskään CSS2.1: ssa ei voi luoda konttialuksia, joissa leveys riippuu elementistä, jolla on prosenttiosuudet leveydelle (tai pehmusteiden leveydelle). Jos tulos on määrittelemätön. Selaimet näyttävät edelleen sisällön, mutta saatat saada odottamasi tulokset. Jos ajattelet sitä, on järkevää, kuten jos konttielementti tarvitsee tietää lohen leveytensä sen leveyden määrittämiseksi, kuten silloin, kun sillä ei ole ennalta määriteltyä leveyttä, ja yksi tai useampi on leveys asetettuna prosentteina säiliöelementistä, tämä muodostaa pyöreän ketjun ilman vastausta. Jos käytät prosenttimääriä asiakirjan asiakirjojen leveydelle, varmista, että myös vanhemman elementin leveydet määritellään.