V šablónach, ako je Asteroid Framework pre Joomla (a vo webdizajne celkovo), sa Margin a Padding používajú na nastavenie medzier a priestoru. Zodpovedajú za to, ako blízko alebo ďaleko sú jednotlivé prvky na stránke (ako texty, obrázky, tlačidlá alebo celé bloky) od seba.

Tento koncept vychádza z tzv. „Box modelu“ v CSS. Predstavte si každý prvok na webe ako neviditeľnú krabičku.

Tu je jednoduché vysvetlenie oboch pojmov:

1. Margin (Vonkajší okraj)

• Čo to je: Je to medzera mimo vášho prvku (za jeho hranicou).

• Na čo slúži: Používa sa na odtlačenie vášho prvku od ostatných prvkov na stránke.

• Príklad: Ak máte dva stĺpce vedľa seba a sú na seba príliš natlačené, pridáte jednému z nich Margin, aby ste ich od seba oddialili.

2. Padding (Vnútorná výplň)

• Čo to je: Je to medzera vo vnútri vášho prvku. Nachádza sa medzi samotným obsahom prvku (napr. textom) a jeho vonkajšou hranicou.

• Na čo slúži: Zabezpečuje, aby obsah nebol „nalepený“ priamo na okraji daného bloku.

• Príklad: Ak máte tlačidlo (farebný obdĺžnik s textom vo vnútri) a chcete, aby bol obdĺžnik väčší a text mal okolo seba priestor na dýchanie, zväčšíte Padding.

Pohľad na vaše nastavenia (z obrázka)

V sekcii Spacing na vašom obrázku vidíte nastavenia pre oba tieto parametre:

• Top (Hore), Right (Vpravo), Bottom (Dole), Left (Vľavo): Priestor môžete definovať presne pre každú stranu zvlášť. Napríklad môžete chcieť medzeru iba pod prvkom, ale nie nad ním.

• Ikonka zámku (🔒): Ak je zámok zamknutý, znamená to, že keď zadáte hodnotu do jedného políčka (napr. 15px), automaticky sa aplikuje na všetky štyri strany. Ak ho odomknete, môžete každej strane zadať inú hodnotu.

• Jednotky (px): Znamená to pixely. V roletovom menu však často nájdete aj iné jednotky ako % (percentá), em alebo rem (relatívne k veľkosti písma) či vh/vw (relatívne k veľkosti obrazovky). Pixely sú najjednoduchšie na začiatok.

Pre lepšie pochopenie toho, ako tieto dve hodnoty ovplyvňujú prvok, som pripravil interaktívnu ukážku. Pomocou posuvníkov si môžete vyskúšať, ako sa správa okraj a výplň.