Właściwość margin służy do zarządzania przestrzenią pomiędzy kontenerami. Używając tej właściwości, możesz przybliżyć lub oddalić elementy od siebie. Margines definiuje wolną przestrzeń, która znajduje się za obramowaniem.
Dzięki CSS masz pełną kontrolę nad marginesami. Możesz ustawić taki sam margines z każdej strony, jak również masz możliwość kontrolowania każdej strony z osobna.
Jak ustawić marginesy?
Aby ustawić marginesy dla każdej strony z osobna, należy wykorzystać właściwości:
margin-top- margines górny,margin-bottom- margines dolny,margin-left- margines lewy,margin-right- margines prawy.
Marginesy mogą przyjmować następujące wartości:
- auto - wartość kalkulowana przez przeglądarkę,
- odległość - podana w px, cm, itp,
- procent - jest to procent szerokości elementu nadrzędnego,
- inherit - wartość będzie dziedziczona z elementu nadrzędnego.
Jak ustawić wszystkie marginesy jedną właściwością?
Aby ustawić wszystkie marginesy za jednym razem, można wykorzystać skróconą komendę margin. Jako wartości przyjmuje ona 4 parametry. Każdy z nich definiuje odpowiednio:
- margines górny,
- margines prawy,
- margines dolny,
- margines lewy.
margin: 20px 10px 0px 10px;
Do wartości margin, można również podać inną liczbę parametrów. Aby zobrazować jak to działa to podam kilka przykładów:
margin: 10px;
W powyższym przykładzie, wszystkie marginesy, przyjmą wartość 10px.
margin: 10px; 20px
W powyższym przykładzie, margines górny i dolny przyjmuje wartość 10px, natomiast wartość 20px odpowiada lewej i prawej stronie.
margin: 10px; 20px 0
W powyższym przykładzie, margines górny to 10px, margines prawy to 20px. Trzecia wartość odpowiada marginesowi dolnemu, czyli wartości 0. Wartość 4 jest nie zdefiniowana, w takiej sytuacji odstęp lewej strony jest taki sam jak odstęp z prawej strony, czyli 20px.
Na początku może się to trochę mieszać, dlatego dla ułatwienia zapamiętaj że wartości te definiuje się od góry i porusza się zgodnie z ruchem wskazówek zegara. Gdy parametr, nie jest zdefiniowany, to przyjmuje wartość jak przeciwległa krawedź. Wyjątkiem jest sytuacja, gdy podana jest tylko jedna wartość, wtedy wszytkie marginesy mają tę samą wartość.
Resetowanie wszystkich marginesów
Dobrą praktyką jest ustawienie domyślnej wartości wszystkich marginesów na wartość 0. Dzięki temu masz pewność, że Twoja strona w każdej przeglądarce, będzie się prezentować tak samo. Naturalnie, będziesz te ustawienia nadpisywał dla kolejnych elementów. Dzięki tej metodzie będziesz miał pewność, że jeżeli nie zdefiniowałeś marginesu dla jakiegoś elementu, to będzie on miał wartość 0.
Zawijanie marginesów
W przypadku marginesu górnego i dolnego, marginesy nie sumują się, tylko przyjmują wyższą wartość. Nie dzieje się tak, w przypadku marginesów bocznych.
Dla przykładu, pierwszy element ma ustawiony dolny margines na 20px. Drugi element ma górny margines ustawiony na 10px. W takiej sytuacji odległość między elementami nie wynosi 20px + 10px. Odległość ta jest równa, wyższej wartości, czyli 20px. Jest to tak zwane zawijanie lub załamywanie marginesów.
Margines automatyczny
Margines automatyczny jest wykorzystywany, aby ustawić jakiś kontener na środku ekranu. Wcześniej dowiedziałeś się, jak można wyrównać tekst do środka. W przypadku kontenerów text-align nie zadziała, ponieważ do wyrównywania kontenerów służą marginesy.