Okraje CSS
Okraje se používají k vytvoření prostoru kolem prvků mimo jakékoli definované hranice.
Okraje CSS
Vlastnosti CSS marginse používají k vytvoření prostoru kolem prvků mimo jakékoli definované hranice.
S CSS máte plnou kontrolu nad okraji. Existují vlastnosti pro nastavení okraje pro každou stranu prvku (nahoře, vpravo, dole a vlevo).
Okraj – jednotlivé strany
CSS má vlastnosti pro určení okraje pro každou stranu prvku:
margin-topmargin-rightmargin-bottommargin-left
Všechny vlastnosti okraje mohou mít následující hodnoty:
- auto - prohlížeč vypočítá marži
- délka – určuje okraj v px, pt, cm atd.
- % - určuje okraj v % šířky obsahujícího prvku
- dědit - určuje, že okraj by měl být zděděn z nadřazeného prvku
Tip: Záporné hodnoty jsou povoleny.
Příklad
Nastavte různé okraje pro všechny čtyři strany prvku <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Marže – těsnopisná vlastnost
Pro zkrácení kódu je možné zadat všechny vlastnosti marginu v jedné vlastnosti.
Vlastnost marginje zkrácená vlastnost pro následující jednotlivé vlastnosti okraje:
margin-topmargin-rightmargin-bottommargin-left
Funguje to takto:
Pokud má marginvlastnost čtyři hodnoty:
- okraj: 25px 50px 75px 100px;
- horní okraj je 25 pixelů
- pravý okraj je 50px
- spodní okraj je 75 pixelů
- levý okraj je 100px
Příklad
Použijte zkrácenou vlastnost margin se čtyřmi hodnotami:
p {
margin: 25px 50px 75px 100px;
}
Pokud má marginvlastnost tři hodnoty:
- okraj: 25px 50px 75px;
- horní okraj je 25 pixelů
- pravý a levý okraj je 50px
- spodní okraj je 75 pixelů
Příklad
Použijte zkrácenou vlastnost margin se třemi hodnotami:
p {
margin: 25px 50px 75px;
}
Pokud má marginvlastnost dvě hodnoty:
- okraj: 25px 50px;
- horní a dolní okraje jsou 25px
- pravý a levý okraj je 50px
Příklad
Použijte zkrácenou vlastnost margin se dvěma hodnotami:
p {
margin: 25px 50px;
}
Pokud má marginvlastnost jednu hodnotu:
- okraj: 25px;
- všechny čtyři okraje jsou 25px
Příklad
Použijte zkrácenou vlastnost margin s jednou hodnotou:
p {
margin: 25px;
}
Automatická hodnota
Vlastnost margin můžete nastavit autona horizontálně vycentrovat prvek v jeho kontejneru.
Prvek pak zabere zadanou šířku a zbývající prostor bude rovnoměrně rozdělen mezi levý a pravý okraj.
Příklad
Použít okraj: auto:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Dědičná hodnota
Tento příklad umožňuje zdědit levý okraj prvku <p class="ex1"> od nadřazeného prvku (<div>):
Příklad
Použití dědičné hodnoty:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}