V tomto tutoriálu se budeme zabývat dvěma věcmi: vnějškové odsazení a vnější okraje.
Začneme s vnějškovými odsazeními. Pro prvky p, které jsou definovány přímo uvnitř prvku body, znamenají údaje o levém a pravém okraji okna vzdálenost od vnějších hran prvků body. Pokud následuje více odstavců za sebou, údaje o vnějším okraji nahoře a dole znamenají vzdálenost mezi jednotlivými odstavci.
Při definici vnějších odsazení a okrajů jsou mimochodem možné i záporné hodnoty, díky nimž lze dosáhnout překrývání.
Nastavení vnějšího odsazení
Vnější okraj a odsazení jsou nuceným prázdným prostorem mezi aktuálním prvkem a jeho rodičovským nebo sousedním prvkem. V HTML prvcích, které vytvářejí vlastní odstavec nebo blok, jsou užitečné následující CSS vlastnosti.
U vlastnosti margin se jedná o zkrácenou formu čtyř vlastností margin-top, margin-right, margin-bottom a margin-left. Jsou možné následující hodnoty:
• auto – vnější odsazení je automaticky spočteno.
• Procentuální hodnota – odkazuje se na prvek, pro který je margin uveden.
• Délková hodnota – jsou povoleny i záporné hodnoty. Tím lze překrývat prvky.
Jsou povoleny až čtyři hodnoty:
• jedna hodnota – vnější odsazení nahoře, dole, vlevo a vpravo
• dvě hodnoty – první hodnota pro vnější odsazení nahoře a dole, druhá hodnota pro vnější odsazení vpravo a vlevo
• tři hodnoty – první hodnota pro vnější odsazení nahoře, druhá hodnota pro vnější odsazení vlevo a vpravo, třetí hodnota pro vnější odsazení dole
• čtyři hodnoty – první hodnota pro vnější odsazení nahoře, druhá pro vpravo, třetí dole a čtvrtá vlevo.
Následující příklad ukazuje použití vlastnosti margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Sestavení kamery-Rig</p>
<p class="ex">V tomto video-tutoriálu se dozvíte, jak vytvořit kamerové závěsy a bezpečně je pohybovat v 3D prostoru. Je přiložen projektový soubor.</p>
</body>
</html>
V tomto příkladu byly definovány dva textové odstavce.
Druhému odstavci byly navíc přiřazeny odsazení.
margin: 30px 50px 30px 50px;
Toto uvedení znamená následující:
• 30 pixelů odsazení nahoru
• 50 pixelů odsazení doprava
• 30 pixelů odsazení dolů
• 50 pixelů odsazení doleva
Jednotlivé údaje pro odsazení
Představeny byly obecné uvedení vlastnosti margin. Můžete však také uvádět jednotlivé údaje. Pomocí následujících vlastností lze pro jednotlivé okraje prvku určit odsazení shora, zleva, zdola nebo zprava.
• margin-top – vnější okraj/odsazení nahoře
• margin-right – vnější okraj/odsazení vpravo
• margin-bottom – vnější okraj/odsazení dole
• margin-left – vnější okraj/odsazení vlevo
U všech čtyř vlastností lze použít následující hodnoty:
• auto – vnější okraj je automaticky spočten.
• Procentuální údaj – odkazuje se na prvek, pro který bylo uvedeno margin-[nahoru, vpravo, dolů, doleva].
• Délkový údaj – jsou povoleny i záporné hodnoty. Tím lze překrývat prvky.
Následující příklad ukazuje, jak efektivně využít jednotlivé údaje.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Sestavení kamery-Rig</p>
<p class="ex">V tomto video-tutoriálu se dozvíte, jak vytvořit kamerové závěsy a bezpečně je pohybovat v 3D prostoru. Je přiložen projektový soubor.</p>
</body>
</html>
V prohlížeči vypadá výsledek následovně:
Nastavení vnitřního odsazení
U vnitřního odsazení se jedná o nucený prázdný prostor mezi obsahem prvku a jeho vlastním okrajem prvku. V HTML prvcích, které vytvářejí vlastní odstavec nebo blok, jsou užitečné následující CSS vlastnosti.
U vlastnosti padding se jedná o zkrácenou formu čtyř vlastností padding-top, padding-right, padding-bottom a padding-left. Lze tím definovat šířku mezi rámečkem a obsahem prvku, tedy vnitřní odsazení.
• Procentuální hodnota – odkazuje se na rodičovský prvek.
• Délková hodnota
Je možné uvést až čtyři hodnoty:
• jedna hodnota – vnitřní odsazení nahoře, dole, vlevo a vpravo
• dvě hodnoty – první hodnota pro vnitřní odsazení nahoře a dole, druhá hodnota pro vnitřní odsazení vpravo a vlevo
• tři hodnoty – první hodnota pro vnitřní odsazení nahoře, druhá hodnota pro vnitřní odsazení vlevo a vpravo, třetí hodnota pro vnitřní odsazení dole
• čtyři hodnoty – první hodnota pro vnitřní odsazení nahoře, druhá pro vpravo, třetí dolů a čtvrtá doleva.
Zde je příklad:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Sestavit kamerový rig</p>
<p class="ex">V tomto video tréninku se dozvíte, jak vytvořit kamerový rig a pohybovat se s ním bezpečně v 3D prostoru. Projektový soubor je k dispozici.</p>
</body>
</html>A zde je výsledek v prohlížeči:
Pomocí čtyř padding vlastností lze definovat vnitřní mezery. Pro to jsou k dispozici následující čtyři CSS vlastnosti:
• padding-top – Vzdálenost mezi horním okrajem obsahu a horním okrajem
• padding-bottom – Vzdálenost mezi dolním okrajem obsahu a dolním okrajem
• padding-left – Vzdálenost mezi levým okrajem obsahu a levým okrajem
• padding-right – Vzdálenost mezi pravým okrajem obsahu a pravým okrajem.
U všech čtyř vlastností lze použít následující hodnoty:
• Procenta – vztahuje se k nadřazenému prvku
• Délka
