Vyplnenie CSS je jednou z vlastností Krabicový model CSS. Táto vlastnosť skratky nastavuje výplň okolo všetkých štyroch strán prvku HTML. Výplň CSS je možné použiť takmer na všetky Značka HTML (okrem niektorých značiek tabuľky). Všetky štyri strany prvku môžu mať navyše inú hodnotu.
Vlastnosť výplne CSS
Ak chcete použiť skratkovú vlastnosť výplne CSS, môžete použiť mnemotechniku „TRouBLe“ (alebo „TRiBbLe“ pre vás fanúšikov Star Treku). Toto znamená hore, správny, dolea vľavo, a odkazuje na poradie šírok výplne, ktoré ste nastavili vo vlastnosti skratky. Napríklad:
výplň: vpravo hore dole vľavo;
výplň: 1px 2px 3px 6px;
Ak ste použili vyššie uvedené hodnoty, použilo by to inú hodnotu výplne na každú stranu ľubovoľného prvku HTML, na ktorý ju aplikujete. Ak chcete použiť rovnaké vypchávky na všetky štyri strany, môžete si svoju zjednodušenie zjednodušiť CSS a stačí napísať jednu hodnotu:
výplň: 12px;
Pri tomto riadku CSS by sa na všetky 4 strany prvku vzťahovalo 12 pixelov výplne.
Ak chcete, aby boli výplne rovnaké pre hornú, spodnú a ľavú a pravú stranu, môžete napísať dve hodnoty:
výplň: 24px 48px;
Prvá hodnota (24 pixelov) by platila pre hornú a dolnú časť, zatiaľ čo druhá by platila pre ľavú a pravú stranu.
Ak napíšete tri hodnoty, vodorovná výplň (ľavá a pravá) bude rovnaká, zatiaľ čo zmeníte hornú a spodnú časť:
výplň: vpravo hore a vľavo dole;
výplň: 0px 1px 3px;
Podľa modelu krabice CSS je výplň najbližšie k samotnému prvku / obsahu. To znamená, že výplň sa pridá k prvku medzi šírku alebo výšku obsahu a akékoľvek hodnoty orámovania, ktoré použijete. Ak je výplň nastavená na nulu, má rovnakú hranu ako obsah.
Hodnoty odsadenia CSS
Výplň CSS môže mať akúkoľvek nezápornú hodnotu dĺžky. Nezabudnite určiť meranie, napríklad px alebo em. Môžete tiež určiť percento výplne, ktoré bude percentom šírky bloku obsahujúceho prvok. Patria sem horné a spodné polstrovanie. Napríklad:
#container {width: 800px; výška: 200px; }
#container p {width: 400px; výška: 75%; výplň: 25% 0; }
The výška odseku vo vnútri # kontajner prvok bude 75% z # kontajnerVýška plus 25% šírky pre horné polstrovanie a 25% šírky pre spodné polstrovanie. Spolu to predstavuje 300 + 200 + 200 = 700 pixlov.
Účinky pridania výplne CSS
On prvky na úrovni bloku, je polstrovanie aplikované na štyri strany. Pretože prvok je už blok alebo škatuľa, na bočné strany škatule sa použije výplň.
Keď sa do CSS pridá polstrovanie vložené prvky, môže dôjsť k určitému prekrývaniu prvkov nad a pod vloženým prvkom, ak zvislé polstrovanie presahuje výšku čiary, ale nebude tlačiť výšku čiary nadol. Na začiatok a na koniec prvku sa pridá vodorovná výplň CSS použitá na vložené prvky. A polstrovanie môže zalamovať čiary. Neplatí to však pre všetky riadky viacriadkového prvku, takže na odsadenie segmentu viacriadkového vloženého obsahu nemôžete použiť odsadenie.
V CSS2.1 tiež nemôžete vytvárať bloky kontajnerov, kde šírka závisí od prvku s percentami pre šírky (alebo šírky výplne). Ak to urobíte, výsledok nie je definovaný. Prehliadače budú aj naďalej zobrazovať obsah, ale možno nedosiahnete očakávané výsledky. Ak sa nad tým zamyslíte, má to zmysel, akoby váš prvok kontajnera potreboval poznať šírku svojich podradených prvkov, aby mohol definovať svoju šírku - ako napr. ak nemá preddefinovanú šírku a jeden alebo viac má šírku nastavenú ako percento prvku kontajnera, nastaví sa kruhový reťazec bez odpoveď. Ak v dokumente použijete percentá pre šírky čohokoľvek, mali by ste sa uistiť, že sú definované aj šírky nadradeného prvku.