paddingVlastnosť CSS definuje najvnútornejšie časť box modelu, vytvára priestor okolo obsahu prvku je, vnútri akékoľvek definované okraje a / alebo hraníc.
Hodnoty výplne sa nastavujú pomocou dĺžok alebo percent a nemôžu akceptovať záporné hodnoty. Počiatočná alebo predvolená hodnota pre všetky vlastnosti výplne je 0.
Tu je jednoduchý príklad:
.box ( padding: 0 1.5em 0 1.5em; )Vyššie uvedený príklad používa vlastnosť paddingskratky, ktorá akceptuje až štyri hodnoty, ktoré sú zobrazené tu:
.box ( padding: || || || )Ak sú nastavené menej ako štyri hodnoty, predpokladajú sa chýbajúce hodnoty na základe tých, ktoré sú definované. Napríklad nasledujúce dve sady pravidiel by získali rovnaké výsledky:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Ak je teda definovaná iba jedna hodnota, nastaví sa tým všetky štyri vlastnosti výplne na rovnakú hodnotu:
.box ( padding: 20px; )Ak sú deklarované tri hodnoty, je to padding: (top) (left-and-right) (bottom);.
Ktorúkoľvek z jednotlivých vlastností výplne je možné deklarovať pomocou ručnej práce, v takom prípade by ste pre každú vlastnosť definovali iba jednu hodnotu. Takže predchádzajúci príklad by sa dal prepísať takto:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Výplne a výpočty šírky prvkov
Ak má prvok zadanú šírku, akékoľvek polstrovanie pridané k tomuto prvku zvýši celkovú šírku prvku. Toto je často nežiaduci výsledok, pretože vyžaduje, aby sa šírka prvku prepočítavala pri každej úprave výplne. (Upozorňujeme, že sa to stáva aj s výškou, ale vo väčšine prípadov sa preferuje nedať prvku nastavenú výšku.)
Napríklad:
.box ( padding: 20px; width: 400px; )V tomto príklade, hoci má .boxprvok explicitnú šírku 400 pixelov, skutočná vykreslená šírka prvku na stránke bude 440 pixlov. Toto zohľadňuje nielen šírku 400px, ale aj 20px ľavého polstrovania a 20px pravého polstrovania (definované v predchádzajúcom príklade so skratkou).
Deje sa tak kvôli zachovaniu 400px priestoru obsahu, a nie 400px celkovej šírky prvku. Toto ukazuje pero:
K tomu dochádza vo všetkých používaných prehliadačoch v štandardnom režime, ale nevyskytuje sa to v IE6 a IE7 v režime quirks (to znamená na stránkach zobrazených v IE6 alebo IE7, kde nie je deklarovaný žiadny typ doctype alebo kde sa deje niečo iné, čo by spustilo quirks. režim).
Ak chcete vyriešiť tento problém a zachovať tak šírku 400px bez ohľadu na množstvo výplne, môžete použiť box-sizingvlastnosť:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )To spôsobí, že si prvok zachová svoju šírku a zároveň zvýši výplň, čím sa zmenší dostupný priestor obsahu. Tu je ukážka:
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Áno | Áno | Áno | Áno | Áno | Áno | Áno |