Margin

Styl ustawia marginesy obiektu. Styl posiada cztery inne warianty:

• margin-top - ustawia tylko margines górny;
• margin-right - ustawia tylko margines prawy
• margin-bottom - ustawia tylko margines dolny
• margin-left - ustawia tylko margines lewy

Wartość:

px, mm, cm, in, pt, pc, em, ex, %

wartości wyrażone w jednostkach długości

auto

marginesy ustwaiane automatycznie (więcej o jego zastosowaniu)

Zamiast używania poszczególnych opcji łatwiej używać samego margin, np:

.klasa_margines{ 
  margin: 15px 10px 5px 0px; 
}

Powyższy przykład ustawi wszystkie marginesy. Wartości oznaczają kolejno marginesy: górny, prawy, dolny, lewy. Aby łatwiej było się poruszać wystarczy zapamiętać, że pierwszy jest ustalany margines górny, a pozostałe są ustalane zgodnie z ruchem wskazówek zegara. Zapis:

.klasa_margines{ 
  margin: 10px; 
}

ustawi wszystkie marginesy na 10px. Natomiast:

.klasa_margines{ 
  margin: 10px 30px; 
}

ustawi górny i dolny margines na 10px, a prawy i lewy na 30px.

Jeśli zawartość strony ma być wyśrodkowana w stosunku do okna przeglądarki należy użyć elementu (np. div), wewnątrz którego zostaną umieszczone właściwe elemanty tworzące treść strony i przydzielić mu marginesy boczne ustawione na auto:

.klasa_margines{ 
  margin: 0px auto 0px auto; 
}

wszystko działa super poza przeglądarką Internet Explorer. Ale w niej do znacznika body można przydzielić styl text-align: center. Więcej o text-align.