#1 Margin
Podobně jako padding, vlastnost margin je odsazení prvku, které ale na rozdíl od vlastnosti padding není součástí prvku; jedná se o vnější odsazení. I když je prvku definována barva pozadí, margin je vždy průhledný (na rozdíl od vlastnosti padding).
Do CSS se zapisuje jako vlastnost margin a může obsahovat jakékoli číselné hodnoty a jejich jednotky.
div {
margin: 100px;
}
Vlastností vlastnosti margin je, že se nepříčítá k šířce prvku, pouze „odpuzuje“ ostatní prvky od prvku s vlastností margin na základě velikosti hodnoty. Pokud bude mít prvek definovaný margin: 30px; a šířku 300px, šířka prvku bude 300px a kolem něj se vytvoří neviditelná bariéra o velikosti 30px na každé straně.
div {
width: 300px;
margin: 30px;
}
#2 Varianty
Samotná vlastnost margin definuje totožnou velikost na všech stranách prvku. Jestliže chceme definovat pouze jednu stranu, existují pro to další čtyři vlastnosti, které z té základní vycházejí – margin-top, margin-right, margin-bottom a margin-left, každá z nich definující svojí stranu.
div {
margin-left: 50px;
margin-top: 30px;
}
Zkracování
Aby nebyl CSS kód zbytečně dlouhý, lze jednotlivé strany zapisovat do samotné základní vlastnosti margin a to v pořadí: top, right, bottom, left. S tímto souvisí také druhá vlastnost, díky které není potřeba specifikovat všechny čtyři strany, jelikož se mohou protější strany přejímat z protější definované – jestliže je definována horní a pravá strana, spodní bude mít velikost horní a levá velikost pravé. Například:
/* Nezkráceně */
div {
margin: 40px 0 40px 0;
}
/* Zkráceně */
div {
margin: 40px 0;
}
Definovat lze také 3 strany, přičemž platí stejné podmínky, s rozdílem, že se aplikuje pouze definovaná na vynechanou stran. V tomto případě bude horní strana 30px, pravá a levá 0px a spodní 15px.
div {
margin: 30px 0px 15px;
}
Hodnota auto
Druhá specifická vlastnost, kterou na rozdíl vlastnost padding nemá, je margin: auto;, která automaticky vycentruje prvek na horizontální ose na střed, jelikož vnější okraj – margin – vyplní všechen dostupný prostor vlevo a vpravo.
div {
width: 250px;
margin: auto;
}