20. diel - Okraje prvkov: margin a padding v CSS3

V predchádzajúcej lekcii, Vzhľady a nastavenie tabuliek v CSS 3 , sme si ukázali, ako nastaviť vlastný vzhľad tabuľky, aké vytvoriť okraje a ako pracovať s jej obsahom.

V tejto lekcii sa pozrieme na dôležitú vec pri formátovaní HTML stránky v jazyku CSS3, a to síce neviditeľné okraje okolo prvkov, ktoré sa nastavujú CSS vlastnosťami margin a padding. Tieto okraje nejdú vidieť, takže ide vlastne o spôsob, akým odsadiť daný prvok od ostatných či obsah prvku od okrajov prvku, čím docielime stránky, na ktorej nie sú prvky na sebe škaredo nalepené a príliš úsporné, ale ktorá naopak pôsobí vzdušne a tak akurát priestorovo " veľkoryso ". V tom, že tieto okraje nie sú vidieť, sa líši od rámčeka (border).

Box model

Na úvod si vysvetlíme rozdiel medzi vonkajším (margin) a vnútorným (padding) okrajom. Pomocou CSS 3 vlastnosti margin nastavujeme okraj elementu, teda vzdialenosť medzi rámčekom a okolím elementu. Pomocou CSS 3 vlastnosti padding potom nastavujeme vzdialenosť medzi rámčekom a obsahom elementu.

Margin a padding sú spolu s vlastnosťou border súčasťou tzv. Box modelu (občas prekladané ako "Krabičková model").

Box model znázorňuje pozíciu týchto 3 vlastností okolo obsahu HTML elementu. Môžeme nastavovať okraje medzi rámčekom a okolím alebo obsahom elementu a rámčekom.

Ani jeden okraj sa nepočíta do veľkosti elementu. Ak teda nastavíme margin na 10px, border na 5px a padding na 10px na elementu s šírkou 100px, bude jeho výsledná šírka 150px.

Margin (vonkajší okraj)

Margin nastaví všetky 4 okraje (ľavý margin, pravý margin, dolný margin aj horný margin) na rovnakú veľkosť. Ak chceme mať každý vonkajší okraj iný, môžeme (namiesto všeobecné vlastnosti margin) použiť tieto vlastnosti:

• margin-left - Ľavý vonkajší okraj.
• margin-right - Pravý vonkajší okraj.
• margin-top - Horný vonkajší okraj.
• margin-bottom - Dolný vonkajší okraj.

Padding (vnútorný okraj)

Padding nastaví všetky 4 vzdialenosti (ľavý padding, pravý padding, dolný padding aj horný padding) na rovnakú veľkosť. Ak chceme mať vnútorný okraj iný, môžeme (podobne ako u margin) použiť tieto vlastnosti:

• padding-left - Ľavý vnútorný okraj.
• padding-right - Pravý vnútorný okraj.
• padding-top - Horný vnútorný okraj.
• padding-bottom - Dolný vnútorný okraj.

Ukážka ostylování okraje elementu

Majme CSS kód:

#kontejner
{
    border: 1px solid blue;
    background-color: #BDBDF8;
    margin: 40px;
    padding: 20px;
    width: 300px;
    height: 100px;
}

A k tomu HTML:

<div id="kontejner">
Mezi rámečkem a okolím je okraj `40px` a mezi tímto textem a rámečkem je okraj `20px`. Pozadí se vykresluje až k rámečku.
</div>

výsledok:

Pomerne jednoduché, že? Nezabudnime, že správna veľkosť vnútorných i vonkajších okrajov je otázkou citu, vkusu a skúsenosti. Je potrebné experimentovať s rôznymi veľkosťami odsadenie a skúšať, čo na nás ako pôsobí. Príliš natesnané prvky pôsobia skľučujúco a chaoticky, príliš veľké a extrémne odsadené zasa vyvolávajú pocit plytvanie miestom a "rozsypanosti" stránky

V ďalšej lekcii, Pokročilejšie okraje a rámčeky v CSS 3 , si ukážeme ako pracovať s tvarom okrajov rámčekov a pokročilým nastavením farebného vzhľadu.