A CSS kitöltés a CSS doboz modell egyik tulajdonsága. Ez a rövidített tulajdonság a HTML-elem mindhárom oldalán a párnázást állítja be. A CSS párnázás szinte minden HTML-címkére alkalmazható (kivéve az asztalcímkék egy részét). Ezenkívül az elem mind a négy oldala eltérő lehet.
CSS padding tulajdonság
A rövidített CSS padding tulajdonság használatához használhatja a mnemonikus "TRouBLe" (vagy "TRiBbLe" az Ön Star Trek rajongóit). Ez a felső , a jobb , az alsó és a bal oldalon van , és a rövidítés tulajdonságában beállított párnázási szélességek sorrendjére utal. Például:
párnázottság: jobb felső sarokban balra; párnázottság: 1px 2px 3px 6px;Ha a fent felsorolt értékeket használta, akkor a HTML-elemek bármelyik oldalán eltérő kitöltési értéket alkalmazna. Ha mind a négy oldalra ugyanazt a betétet szeretné alkalmazni, egyszerűsítheti a CSS-t, és csak írhat egyet:
párnázottság: 12px;A CSS ezen vonalán 12 pixeles kitöltés vonatkozik az elem mind a 4 oldalára.
Ha azt szeretné, hogy a párnázás a felső és az alsó, illetve a bal és a jobb oldali részhez hasonló legyen, két értéket írhat:
párnázottság: 24px 48px;Az első érték (24px) a felső és az alsó részre, míg a második a balra és a jobbra vonatkozik.
Ha három értéket ír, akkor a vízszintes párkány (bal és jobb) ugyanaz lesz, a felső és az alsó rész megváltoztatásával:
párnázottság: jobb felső és bal alsó; párnázottság: 0px 1px 3px;A CSS doboz modell szerint a padding a legközelebb áll az elemhez / tartalomhoz. Ez azt jelenti, hogy a tartalom szélessége vagy magassága és a használt határértékek között egy elemet adunk hozzá. Ha a padding nullára van állítva, akkor ugyanolyan él, mint a tartalom.
CSS kitöltési értékek
A CSS padding bármilyen nem negatív hosszúságú értéket vehet fel. Győződjön meg arról, hogy megadja a mérést, például a px vagy az em. Megadhatja a kitöltés százalékos arányát is, amely az elem blokkjának szélességének százalékos aránya lesz. Ez magában foglalja a felső és az alsó párnázást. Például:
#container {width: 800px; magasság: 200px; } #container p {width: 400px; magasság: 75%; párnázottság: 25% 0; }A #container elem belsejében lévő bekezdés magassága a #container magasságának 75% -a, a felső párnázat szélességének 25% -a és az alsó párkány szélességének 25% -a. Ez összesen 300 + 200 + 200 = 700 px.
A CSS kitöltése hatásai
A blokkszintű elemeken a párnázást a négy oldalon alkalmazzák. Mivel az elem már blokk vagy doboz, a párnázást a doboz oldalaira alkalmazzák.
Amikor a CSS párnázást hozzáadjuk az inline elemekhez , akkor az elemek felülbírálhatók az inline elem felett és alatt, ha a függőleges párnázás meghaladja a vonalmagasságot, de a vonal magasságát nem tolja le. Az inline elemekre alkalmazott horizontális CSS-párnázás hozzáadásra kerül az elem elejére és az elem végeire. És a párnázás átfedheti a vonalakat. De ez nem vonatkozik a többsoros elem összes sorára, ezért nem használhat kitöltést a több soros inline tartalom szegmensének beillesztésére.
Továbbá, a CSS2.1-ben nem hozhat létre konténer blokkokat, amelyek szélessége szélességi (vagy párnázott szélességű) százalékokat tartalmazó elemtől függ. Ha az eredményt meg nem határozza. A böngészők továbbra is megjelenítik a tartalmat, de előfordulhat, hogy nem kapja meg a várható eredményeket. Ha úgy gondolja, akkor van értelme, mintha a konténer elemének ismernie kellene a gyermek elemeinek szélességét annak szélességének meghatározásához - például, ha nincs előre meghatározott szélessége, és egy vagy több a konténerelem százalékos arányában beállított szélesség, ez körkörös láncot hoz létre, amely nem válaszol. Ha a dokumentum szélességénél a százalékos százalékos arányokat használja, győződjön meg róla, hogy a szülőelem-szélességek is meg vannak határozva.