Polstrování CSS je jedním z vlastností modelu CSS boxu . Tato vlastnost zkratky nastavuje polstrování kolem všech čtyř stran elementu HTML. Polstrování CSS lze použít na téměř všechny značky HTML (s výjimkou některých značek tabulky). Navíc všechny čtyři strany prvku mohou mít jinou hodnotu.
Vlastnost CSS Padding
Chcete-li použít zkrácenou vlastnost CSS padding, můžete použít mnemotechnické "TRouBLe" (nebo "TRiBbLe" pro vás fanoušky Star Treku). Toto znamená horní , pravé , spodní a levé a vztahuje se na pořadí šířky polštářů, které jste nastavili ve vlastnostech zkrácené vazby. Například:
polstrování: vpravo dole vlevo dole; polstrování: 1px 2px 3px 6px;Pokud jste použili výše uvedené hodnoty, použijete jinou hodnotu polštářku na každou stranu libovolného prvku HTML, na který ji používáte. Pokud chcete použít stejné polstrování na všech čtyřech stranách, můžete zjednodušit CSS a zapsat jednu hodnotu:
polstrování: 12px;S touto řadou CSS by se na všechny 4 strany prvku vztahovaly 12 pixelů polstrování.
Pokud chcete, aby polstrování bylo stejné pro horní a spodní a levé a pravé, můžete napsat dvě hodnoty:
polstrování: 24px 48px;První hodnota (24 pixelů) platí pro horní a dolní část, zatímco druhá platí pro levou a pravou.
Pokud píšete tři hodnoty, bude horizontální výplň (vlevo a vpravo) stejná, při změně horní a dolní:
polstrování: horní pravá a levá dolní část; polstrování: 0px 1px 3px;Podle modelu krabice CSS je polstrování nejblíže samotnému prvku / obsahu. To znamená, že polstrování se přidává k prvku mezi šířkou nebo výškou obsahu a jakými hraničními hodnotami používáte. Pokud je výplň nastavena na nulu, má stejný okraj jako obsah.
CSS Padding Values
Polstrování CSS může mít libovolnou hodnotu bez záporné délky. Ujistěte se, že jste zadali měření, například px nebo em. Můžete také zadat procentuální poměr pro polstrování, což bude procento šířky bloku obsahujícího prvky. Toto zahrnuje horní a dolní polstrování. Například:
#container {width: 800px; výška: 200px; } #container p {šířka: 400px; výška: 75%; polstrování: 25% 0; }}Výška odstavce uvnitř prvku #container bude 75% výšky #container plus 25% šířky pro vrchní polstrování a 25% šířky pro spodní polstrování. To je celkem 300 + 200 + 200 = 700px.
Účinky přidání vložky CSS
U prvků na úrovni bloku je polstrování aplikováno na čtyřech stranách. Vzhledem k tomu, že prvek je blok nebo krabice již, polstrování se aplikuje na strany krabice.
Když se do vložených prvků přidává polstrování CSS, může docházet k překrývání prvků nad a pod vloženým prvkem, pokud vertikální výplň překročí výšku čáry, ale nebude tlačit výšku čáry dolů. Horizontální polstrování CSS aplikované na vložené elementy bude přidáno na začátek elementu a konec prvku. A polstrování může zabalit čáry. Ale nebude se vztahovat na všechny řádky prvku s více řádky, takže nemůžete použít polstrování k odsazení segmentu víceřádkového inline obsahu.
Také v CSS2.1 nelze vytvořit bloky kontejnerů, kde šířka závisí na prvku s procenty šířky (nebo šířky polštářů). Pokud uděláte výsledek, je nedefinováno. Prohlížeče budou stále zobrazovat obsah, ale pravděpodobně nebudete mít výsledky, které očekáváte. Pokud o tom uvažujete, má smysl, jako by váš element kontejneru potřeboval znát šířku svých podřízených prvků, aby definoval jeho šířku - například když nemá předem definovanou šířku a jeden nebo více má šířka nastavená jako procento kontejnerového prvku, nastaví kruhový řetězec bez odpovědi. Použijete-li pro váš dokument procentuální hodnoty pro šířky cokoli, měli byste se ujistit, že jsou definovány také šířky rodičovských prvků.