Predmetová komisia ELT a INF

Učebnica CSS - Margin

CSS - Box Model - Margin

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

Vlastnosť margin určuje, ako "ďaleko" má byť okolitý obsah od elementu.

Margin

CSS margin vlastnosti definujú medzeru okolo elementu. Margin nemá farbu pozadia a je úplne transparentný.

Hore, vpravo a dole, a ľavý okraj možno meniť nezávisle pomocou samostatných vlastnosti. Skrátené vlastností môžu byť tiež použité a to pre všetky okraje naraz.

Možné hodnoty

Vlastnosť Popis
auto V prehliadači nastaví rozpätie. Výsledok je závislý na prehliadači
length Definuje pevný margin (v pixeloch, pt, em, atď.)
% Definuje margin v % obsahom elementu

Margin - Individuálne strany

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

Príklad

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Vyskúšajte si to »

Margin - Skratka vlastností

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

Skratka vlastností pre všetky margin vlastností je "okraj"

Príklad

margin:100px 50px;

Vyskúšajte si to »

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

  • margin: 25px 50px 75 pixelov 100px;
    horný okraj 25px
    pravý okraj je 50px
    spodný okraj 75 pixelov
    ľavý okraj je 100px
  • margin: 25px 50px 75 pixelov;
    horný okraj 25px
    pravý a ľavý okraj sú 50px
    je spodný okraj 75 pixelov
  • margin: 25px 50px;
    horný a dolný okraj sú 25px
    pravý a ľavý okraj sú 50px
  • margin: 25px;
    všetky štyri okraje sú 25px

Ďalšie príklady

Nastaviť horný okraj textu pomocou hodnoty v cm
Tento príklad ukazuje, ako nastaviť horný okraj textu pomocou hodnoty v cm.

Nastaviť spodný okraj textu pomocou percentuálnej hodnoty
Tento príklad ukazuje, ako nastaviť spodný okraj textu pomocou hodnoty v percentách.

Príklad

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Vyskúšajte si to »

Vyššie uvedený príklad môže byť tiež nastavený s jedinou vlastnosťou:

Príklad

border-style:dotted solid;

Vyskúšajte si to »

Border - style vlastnosť môže mať jednu až štyri hodnoty.

  • border - style: bodkovaného pevné dvojité čiarkovanej;
    • horná hranica je bodkovaná
    • pravý okraj je pevný
    • spodný okraj je dvojitý
    • ľavý okraj je prerušovaný
  • border - style: pevné dvojité bodkovanie;
    • horná hranica je bodkovaná
    • pravého a ľavého okraja sú pevné
    • spodný okraj je dvojitý
  • border - style: bodkované pevné;
    • Horné a spodné okraje sú bodkované
    • pravého a ľavého okraja sú pevné
  • border - style: bodkované;
    • všetky štyri okraje sú bodkované

Ohraničenia - Dedenie vlastností

Ako môžete vidieť z vyššie uvedených príkladoch, existuje mnoho vlastností, ktoré sa dajú použiť pri okrajoch.

Ak chcete skrátiť kód, to je tiež možné špecifikovať všetky hranice vlastností v jeden objekt. Toto sa nazýva dedenie vlastností.

Príklad

border:5px solid red;

Vyskúšajte si to »

Pri použití poradie prvkov je nasledovné:

  • border - šírka
  • border - style
  • border - color

Nezáleží na tom, ak jedna z vyššie uvedených hodnôt chýba (aj keď, treba border - style) pokiaľ je zvyšok v uvedenom poradí.

Ďalšie príklady

Všetky vlastností v jednej
Tento príklad ukazuje možnosť pre nastavenie všetkých vlastností pre horné ohraničenie.

Nastavenie štýlu spodného ohraničenia
Tento príklad ukazuje, ako nastaviť štýl spodnej hranice.

Nastavte šírku ľavého okraja
Tento príklad ukazuje, ako nastaviť šírku ľavého okraja.

Nastavte farbu pre štyri okraje
Tento príklad ukazuje, ako nastaviť farbu pre štyri okraje.

Nastaviť farbu pravého okraja
Tento príklad ukazuje, ako nastaviť farbu pravého okraja.

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