paddingOminaisuus CSS määrittää sisimmän osan laatikon malli, luodaan tilaa noin elementin sisällön, sisällä minkä tahansa määritellyn marginaalien ja / tai rajoja.
Täyte-arvot asetetaan pituuden tai prosenttiosuuden perusteella, eivätkä ne voi hyväksyä negatiivisia arvoja. Kaikkien täyteominaisuuksien alkuperäinen tai oletusarvo on 0.
Tässä on yksinkertainen esimerkki:
.box ( padding: 0 1.5em 0 1.5em; )Yllä olevassa esimerkissä käytetään paddinglyhenneominaisuutta, joka hyväksyy enintään neljä tässä esitettyä arvoa:
.box ( padding: || || || )Jos asetetaan vähemmän kuin neljä arvoa, oletetaan puuttuvat arvot määriteltyjen arvojen perusteella. Esimerkiksi seuraavat kaksi sääntöjoukkoa saisivat samanlaiset tulokset:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Jos siis määritetään vain yksi arvo, tämä asettaa kaikki neljä täytteen ominaisuutta samaan arvoon:
.box ( padding: 20px; )Jos ilmoitetaan kolme arvoa, se on padding: (top) (left-and-right) (bottom);.
Mikä tahansa yksittäisistä täyteominaisuuksista voidaan ilmoittaa pitkäkäden avulla, jolloin määrität vain yhden arvon ominaisuutta kohden. Joten edellinen esimerkki voitaisiin kirjoittaa uudestaan seuraavasti:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Pehmuste- ja elementtileveyslaskelmat
Jos elementillä on määritelty leveys, kaikki siihen lisätyt pehmusteet lisäävät elementin kokonaisleveyttä. Tämä on usein ei-toivottu tulos, koska se vaatii elementin leveyden laskemisen uudelleen joka kerta, kun pehmustetta säädetään. (Huomaa, että tämä tapahtuu myös korkeuden kanssa, mutta useimmissa tapauksissa ei ole suositeltavaa antaa elementille asetettua korkeutta.)
Esimerkiksi:
.box ( padding: 20px; width: 400px; )Vaikka tässä esimerkissä .boxelementille annetaan nimenomainen leveys 400 kuvapistettä, sivun elementin todellinen renderoitu leveys on 440 kuvapistettä. Tässä otetaan huomioon paitsi 400 kuvapisteen leveys, myös 20 kuvapistettä vasemmanpuoleista pehmustetta ja 20 kuvapistettä oikeanpuoleisen pehmusteen (edellisessä esimerkissä määritelty pehmusteen lyhenteellä).
Tämä tapahtuu 400px: n sisältötilan ylläpitämiseksi 400px: n kokonaiselementin leveyden sijaan. Tässä on kynä, joka osoittaa tämän:
Tämä tapahtuu kaikissa käytössä olevissa selaimissa, vakiotilassa, mutta ei tapahdu IE6: ssa ja IE7: ssä quirks-tilassa (ts. IE6: ssa tai IE7: ssä näytetyillä sivuilla, joissa ei ole ilmoitettua doctyyppiä tai jos jotain muuta tapahtuu laukaisemaan haittoja) tilassa).
Voit ratkaista tämän ongelman pitämällä siten leveyden 400 kuvapistettä täyteiden määrästä riippumatta, voit käyttää box-sizingominaisuutta:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Tämä saa elementin säilyttämään leveytensä samalla kun lisäät täyttöä, mikä vähentää käytettävissä olevaa sisältöä. Tässä on esittely:
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jep | Jep | Jep | Jep | Jep | Jep | Jep |