Polstrovanie CSS je jedným z vlastností modelu CSS box . Táto vlastnosť skratky nastavuje polstrovanie okolo všetkých štyroch strán elementu HTML. Polstrovanie CSS možno použiť na takmer každú značku HTML (okrem niektorých tabuľkových značiek). Navyše všetky štyri strany prvku môžu mať inú hodnotu.
Vlastnosť CSS Padding
Ak chcete použiť skrátenú vlastnosť CSS padding, môžete použiť mnemotechnické "TRouBLe" (alebo "TRiBbLe" pre fanúšikov Star Treku). Toto označuje hornú , pravú , spodnú a ľavú stranu a vzťahuje sa na poradie šírok políčok, ktoré ste nastavili v skratke. Napríklad:
polstrovanie: hore vpravo dole vľavo; polstrovanie: 1px 2px 3px 6px;Ak ste použili vyššie uvedené hodnoty, použila by sa na každú stranu akéhokoľvek elementu HTML, na ktorý ju používate, odlišnú hodnotu vycpávky. Ak chcete použiť rovnaké polstrovanie na všetkých štyroch stranách, môžete zjednodušiť CSS a stačí zapísať jednu hodnotu:
polstrovanie: 12px;Pri tejto línii CSS by sa na všetky 4 strany prvku vzťahovalo 12 pixelov polstrovania.
Ak chcete, aby polstrovanie bolo rovnaké pre hornú a dolnú a ľavú a pravú, môžete napísať dve hodnoty:
polstrovanie: 24px 48px;Prvá hodnota (24px) by sa vzťahovala na hornú a dolnú časť, zatiaľ čo druhá sa vzťahovala na ľavú a pravú stranu.
Ak napíšete tri hodnoty, čím sa horizontálne polstrovanie (vľavo a vpravo) zmení rovnako, pri zmene hore a dole:
polstrovanie: hore vpravo a vľavo; polstrovanie: 0px 1px 3px;Podľa modelu krabice CSS je výplň najbližšie k samotnému prvku / obsahu. To znamená, že výplň je pridaná k prvku medzi šírkou alebo výškou obsahu a ľubovoľnými hraničnými hodnotami, ktoré používate. Ak je výplň nastavená na nulu, má rovnaký okraj ako obsah.
Hodnoty výplne CSS
Polstrovanie CSS môže mať akúkoľvek hodnotu bez zápornej dĺžky. Uistite sa, že ste zadali meranie, napríklad px alebo em. Môžete tiež určiť percentuálny pomer pre polstrovanie, čo bude percento šírky bloku obsahujúceho prvok. Toto zahŕňa horné a spodné polstrovanie. Napríklad:
#container {width: 800px; výška: 200px; } #container p {šírka: 400px; výška: 75%; polstrovanie: 25% 0; }Výška odseku vnútri prvku #container bude 75% výšky #container plus 25% šírky pre hornú výplň a 25% šírky pre spodnú výplň. Táto suma je 300 + 200 + 200 = 700 pixlov.
Účinky pridania vložky CSS
Na prvkoch na úrovni blokov sa polstrovanie nanáša na štyri strany. Pretože prvok je už blok alebo krabica, polstrovanie sa aplikuje na strany krabice.
Keď sa políčko CSS pridáva do vložených prvkov , môže dochádzať k nejakému prekrývajúcemu sa prvku nad a pod prvok inline, ak vertikálna výplň prekročí výšku čiary, ale nebude tlačiť výšku línií nadol. Horizontálne CSS polstrovanie aplikované na vložené prvky sa pridá k začiatku prvku a ku koncu prvku. A polstrovanie môže zabaliť linky. Nevzťahuje sa to na všetky riadky prvku s viacerými riadkami, takže nemôžete používať polstrovanie na odsadenie segmentu inline obsahov s viacerými riadkami.
Aj v CSS2.1 nemôžete vytvoriť bloky kontajnerov, kde šírka závisí od prvku s percentami pre šírky (alebo šírky vycpávky). Ak urobíte výsledok nedefinovaný. Prehliadače budú stále zobrazovať obsah, ale nemusíte získať výsledky, ktoré očakávate. Ak o tom premýšľate, má to zmysel, akoby váš prvok kontajnera potreboval poznať šírku svojich detských prvkov, aby definoval jeho šírku - napríklad keď nemá preddefinovanú šírku a jeden alebo viac má šírka nastavená ako percento kontajnerového prvku, nastavuje kruhový reťazec bez odpovede. Ak vo svojom dokumente používate percentá pre šírku čokoľvek, mali by ste sa uistiť, že sú tiež definované šírky nadradeného prvku.