paddingVlastnost CSS definuje nejvnitřnější část box modelu, vytváří prostor kolem obsahu prvku je, uvnitř jakékoliv definované okraje a / nebo hranic.
Hodnoty odsazení se nastavují pomocí délek nebo procent a nemohou přijmout záporné hodnoty. Počáteční nebo výchozí hodnota pro všechny vlastnosti výplně je 0.
Zde je jednoduchý příklad:
.box ( padding: 0 1.5em 0 1.5em; )Výše uvedený příklad používá vlastnost paddingzkratky, která přijímá až čtyři hodnoty zobrazené zde:
.box ( padding: || || || )Pokud jsou nastaveny méně než čtyři hodnoty, předpokládají se chybějící hodnoty na základě definovaných hodnot. Například následující dvě sady pravidel by získaly stejné výsledky:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Pokud je tedy definována pouze jedna hodnota, nastaví se všechny čtyři vlastnosti výplně na stejnou hodnotu:
.box ( padding: 20px; )Pokud jsou deklarovány tři hodnoty, je padding: (top) (left-and-right) (bottom);.
Libovolnou z jednotlivých vlastností výplně lze deklarovat pomocí longhand, v takovém případě byste definovali pouze jednu hodnotu pro každou vlastnost. Takže předchozí příklad lze přepsat takto:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Výpočty polstrování a šířky prvků
Pokud má prvek zadanou šířku, jakékoli polstrování přidané k tomuto prvku se přidá k celkové šířce prvku. To je často nežádoucí výsledek, protože vyžaduje, aby byla šířka prvku přepočítána pokaždé, když je upravena výplň. (Všimněte si, že se to děje také s výškou, ale ve většině případů se nedoporučuje dávat prvku nastavenou výšku.)
Například:
.box ( padding: 20px; width: 400px; )V tomto příkladu, i když je .boxprvku dána explicitní šířka 400px, skutečná vykreslená šířka prvku na stránce bude 440px. Toto zohledňuje nejen šířku 400px, ale také 20px levého polstrování a 20px pravého polstrování (definované v předchozím příkladu s těsnicí lištou).
To se děje za účelem zachování 400px prostoru obsahu, nikoli 400px celkové šířky prvku. Toto ukazuje pero:
K tomu dochází ve všech používaných prohlížečích v režimu standardů, ale nedojde k tomu v IE6 a IE7 v režimu quirks (tj. Na stránkách zobrazených v IE6 nebo IE7, kde není deklarován žádný doctype nebo kde se děje něco jiného, aby spustilo quirks režim).
Chcete-li tento problém vyřešit, a tím zachovat šířku 400px bez ohledu na množství výplně, můžete použít box-sizingvlastnost:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )To způsobí, že si prvek zachová svou šířku a zároveň zvětší výplň, čímž zmenší dostupný prostor obsahu. Zde je ukázka:
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Ano | Ano | Ano | Ano | Ano | Ano | Ano |