Predmetová komisia ELT a INF

Učebnica CSS - Padding

CSS - Box Model - Padding (Výplň)

« Predchádzajúca Ďalšia kapitola »

CSS vlastnosti paddingu definujú medzeru medzi okrajmi elementu a obsahom elementu.

Padding

Rozlišujeme dva druhy okrajov: vnútorný a vonkajší. Vnútorný okraj (po anglicky padding) alebo po slovensky výplň a vonkajší margin. Mezi paddingom a marginom sa zobrazuje rámeček (border). Padding je ovplyvnený farbou pozadia prvku. Hore, vpravo, dole, vľavo a padding možno meniť nezávisle pomocou samostatných vlastnosti. Skratka vlastnosti padding môže byť tiež použitá, pre všetky padding naraz.

Možné hodnoty

Vlastnosť Popis
length Definuje pevné padding ( v pixeloch, pt, em, atď )
% Definuje padding v % s obsahom elementu

Padding - Individuálne strany

V CSS je možné zadať rôzny padding pre jednotlivé strany

Príklad

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Vyskúšajte si to »

Padding - Skrátená vlastnosť

Ak chcete skrátiť kód, je možné špecifikovať všetky vlastnosti okraje v jednom príkaze.. Toto sa nazýva skrátená vlastnosť.

Skrátená vlastnosť pre všetky padding vlastnosť je "padding":

Príklad

padding:25px 50px;

Vyskúšajte si to »

Padding môže mať jeden až štyri hodnoty.

  • padding: 25px 50px 75 pixelov 100px;
    horná výplň je 25px
    právo výplň je 50px
    dolná výplň je 75 pixelov
    vľavo výplň je 100px
  • padding: 25px 50px 75 pixelov;
    horná výplň je 25px
    pravé a ľavé výplne sú 50px
    dolná výplň je 75 pixelov
  • padding: 25px 50px;
    horné a dolné výplne sú 25px
    pravé a ľavé výplne sú 50px
  • padding: 25px;
    všetky štyri výplne sú 25px

Ďalšie príklady

Všetky vlastnosti paddingu v jednej deklarácii
Tento príklad ukazuje skratku vlastnosti pre nastavenie všetkých vlastností padding v jednej deklarácii

Nastaviť ľavý padding
Tento príklad ukazuje, ako nastaviť ľavý padding AP elementu.

Nastaviť pravý padding
Tento príklad ukazuje ako na pravé nastavenie AP elementu.

Nastavenie horného paddingu
Tento príklad ukazuje, ako nastaviť horný padding AP elementu.

Nastaviť dolného paddingu
Tento príklad ukazuje, ako nastaviť dolný padding AP elementu.

« Predchádzajúca Ďalšia kapitola »