Margines tworzy pustą przestrzeń wokół elementu, odsuwając go od innych elementów. Nie wchodzi on w skład pola elementu, tylko znajduje się na zewnątrz, poza obramowaniem, jak widać na poniższej ilustracji, i w związku z tym nie ma wpływu na rozmiar elementu. Krótko mówiąc, marginesy służą do ustawiania odstępów między elementami na stronie.
Domyślnie wartość początkowa marginesu wynosi zero, więc jest on nieobecny, ale można go ustawiać za pomocą grupy własności CSS, z których wszystkie mają nazwy zaczynające się od słowa margin, np.:
p {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}Ta reguła ustawia górny i dolny margines akapitów na 10 pikseli oraz lewy i prawy margines akapitów na 5 pikseli. Istnieje także własność zbiorcza marginesy oraz grupa logicznych własności marginesów, której opis znajduje się w dalszej części tego rozdziału.
Dozwolone wartości
Wartością marginesu może być liczba z jednostką długości, np. px, wartość procentowa, np. 10% lub słowo kluczowe auto (i oczywiście globalne słowa kluczowe CSS). Wartości procentowe odnoszą się do szerokości elementu nadrzędnego, tzn. jeśli element nadrzędny ma na przykład 100 pikseli szerokości, to margines o wartości 10% ma 10 pikseli szerokości.
W powyższym przykładzie zostały użyte indywidualne własności marginesu, które umożliwiają ustawienie jego wartości z każdej strony elementu osobno. Ponadto istnieje własność zbiorcza margin, która umożliwia ustawienie marginesu z dowolnej liczby stron, zależnie od tego, ile zostanie jej przekazanych wartości, np.:
p {
margines: 10px 5px;
}Ta reguła jest równoznaczna z poprzednią, tzn. ustawia górne i dolne marginesy na 10 pikseli oraz lewe i prawe na 5 pikseli. Szczegółowy opis własności margin znajduje się na stronie Własność margin.
Marginesy fizyczne i marginesy logiczne
Fizyczne własności marginesu to te, które określają margines w odniesieniu do strony, niezależnie od kierunku i orientacji pisma dokumentu, a więc odnoszą się do kierunków góra, prawa, dół i lewa (odpowiednio top, right, bottom, left). Zaliczają się do nich własności margin-top, margin-right, margin-bottom oraz margin-left (i ich własność zbiorcza margin).
Natomiast logiczne własności marginesu (ang. flow-relative margin properties) to te, które określają margines w odniesieniu do kierunku i orientacji pisma dokumentu (ustawień własności writing-mode, direction i text-orientation). Zaliczają się do nich następujące własności: margin-block, margin-block-start, margin-block-end, margin-inline, margin-inline-start, margin-inline-end.
Scalanie marginesów
W niektórych sytuacjach marginesy pionowe (górny i dolny) elementów blokowych ulegają połączeniu, co nazywa się scalaniem marginesów (ang. margin collapsing), w taki sposób, że zastosowany zostaje tylko największy z nich (albo tylko jeden, jeśli są równe), a pozostałe zostają przez niego „wchłonięte”.
Najczęściej dochodzi do tego w sytuacji, kiedy dwa elementy, znajdujące się jeden nad drugim, stykają się marginesami dolnym i górnym, ale może się też zdarzyć, że zetkną się w ten sposób np. trzy elementy i wówczas również następuj scalenie marginesów. Spójrz na poniższy przykład.
div#a {
background-color: lightpink;
margin-bottom: 30px;
width: 300px;
}
div#b {
background-color: coral;
margin-top: 25px;
width: 300px;
}
...
<div id="a">Lorem ipsum dolor sit amet, consectetur.</div>
<div id="b">Lorem ipsum dolor sit amet, consectetur.</div>Te dwie reguły definiują własności dwóch elementów div – a i b. Element a ma margines dolny o szerokości 30 pikseli, a element b ma margines górny o szerokości 25 pikseli. Intuicyjnie można więc założyć, że te dwa elementy powinna dzielić odległość równa sumie tych marginesów, czyli 55 pikseli.
Tak jednak nie będzie. Zgodnie z zasadą scalania marginesów, zastosowany zostanie tylko największy z marginesów, czyli w tym przypadku 30-pikselowy. Poniżej po lewej stronie jest pokazany efekt działania powyższych reguł, a po prawej stronie są pokazane elementy odsunięte od siebie na odległość 55 pikseli. Widać wyraźnie, że margines po lewej stronie jest znacznie mniejszy, bo wynosi tylko 30 pikseli.
Kiedy marginesy są scalane
Powyżej została opisana najbardziej typowa i najczęściej spotykana sytuacja, w której dochodzi do scalenia marginesów, ale nie jest ona jedyna. Poniżej znajduje się opis sytuacji, w których dochodzi do scalenia marginesów.
- Zetknięcie marginesu dolnego jednego elementu i marginesu górnego innego elementu, który znajduje się pod nim – sytuacja opisana powyżej.
- Zetknięcie górnego marginesu elementu rodzica i górnego marginesu elementu dziecka lub zetknięcie dolnego marginesu elementu rodzica i dolnego marginesu elementu dziecka np.:
div { margin-top: 30px; } p { margin-top: 30px; } ... <divgt;<pgt;Lorem ipsum dolor sit amet, consectetur.</pgt;</div>W tym przypadku marginesy górne elementów
divipzostaną scalone, dzięki czemu elementdivbędzie odsunięty od elementu znajdującego się nad nim na odległość 30 pikseli.Warto o tym pamiętać, ponieważ intuicyjnie można założyć, że element
pw tym przypadku powinien zostać odsunięty od górnej krawędzi elementudivna odległość 30 pikseli. Tak jednak się nie stanie ze względu na scalanie marginesów. - Kiedy element jest pozbawiony właściwej treści, marginesy jego elementów potomnych ulegają scaleniu, nie ma górnego ani dolnego obramowania ani dopełnienia, własność
min-heightjest ustawiona na0, a własnośćheightna0lubauto.
Scalanie marginesów ujemnych
Marginesy mogą mieć wartości ujemne i wtedy obowiązują szczególne zasady dotyczące ich scalania:
- Jeśli jeden margines jest ujemny, a drugi dodatni, to zostaną one zsumowane, tzn. jeśli margines dolny jednego elementu ma 30 pikseli szerokości, a margines górny drugiego ma -10 pikseli szerokości, to ostatecznie margines będzie miał szerokość 20 pikseli.
- Jeśli oba marginesy są ujemne, to zastosowany zostaje mniejszy z nich. Na przykład, jeśli margines dolny jednego elementu ma -30 pikseli szerokości, a margines górny drugiego ma -10 pikseli szerokości, to ostatecznie margines będzie miał szerokość -30 pikseli.
- Scaleniu nie ulegają marginesy elementu głównego, czyli elementu
html.
Scalanie trzech marginesów
Wcześniej była mowa o scalaniu większej liczby marginesów niż dwa. Choć w pierwszej chwili może się wydać, że to niezbyt częsta sytuacja, tak naprawdę nie należy ona do rzadkości. Spójrz na poniższy przykład.
div#a {
background-color: lightpink;
margin-bottom: 30px;
width: 200px;
}
div#b {
background-color: coral;
margin-top: 25px;
width: 200px;
}
p {
margin-top: 50px;
}
...
<div id="a">Lorem ipsum dolor sit amet, consectetur.</div>
<div id="b"><p>Lorem ipsum dolor sit amet, consectetur.</p></div>W tym przypadku scaleniu ulegną margines dolny elementu div o identyfikatorze a oraz marginesy górne elementu div o identyfikatorze b i elementu p. W wyniku tego elementy div a i b będą rozdzielone marginesem o szerokości 50 pikseli.
Kiedy marginesy nie są scalane
W pewnych sytuacjach marginesy nie są scalane:
- Scaleniu nie ulegają marginesy między elementami pływającymi (
float) i pozycjonowanymi absolutnie a jakimikolwiek innymi elementami. - Scaleniu nie ulegają marginesy elementów tworzących nowy kontekst formatowania blokowego, takich jak elementy pływające (
float) i elementy o innym ustawieniu własnościoverflowniżvisible, z ich elementami potomnymi. - Scaleniu nie ulegają marginesy pól
inline-blockz jakimikolwiek innymi elementami.
Marginesy ujemne
Marginesy, w odróżnieniu od dopełnienia, mogą mieć wartości ujemne i wtedy działają odwrotnie niż normalnie, tzn. zamiast odsuwać elementy od siebie, to je do siebie przyciągają. Spójrz na poniższy przykład.
section {
background-color: lightpink;
width: 200px;
}
footer {
background-color: coral;
margin-top: -20px;
width: 200px;
}
...
<section>Lorem ipsum dolor sit amet, consectetur.</section>
<footer>Lorem ipsum dolor sit amet, consectetur.</footer>W tym przypadku element footer zostanie „podciągnięty” do góry przez ujemny margines, przez co nałoży się częściowo na znajdującym się nad nim element section, jak widać na poniższym zrzucie ekranu.
Centrowanie poziome elementów
Jedną z popularnych technik centrowania elementów w poziomie jest ustawienie im marginesów poziomych na auto. Aby ta technika zadziałała, element musi mieć określoną szerokość, np.:
header {
margin: 10 auto;
width: 70%;
}W tym przypadku element header będzie zajmował 70 procent szerokości swojego elementu rodzica oraz będzie ustawiony na środku tego elementu, tzn. po lewej i po prawej stronie będzie miał tyle samo pustej przestrzeni.
Lista własności marginesów
W CSS dostępnych jest kilka własności marginesów. Poniżej znajduje się ich lista z krótkimi opisami ułożona w kolejności alfabetycznej. Kliknij nazwę dowolnego z nich, aby przejść do strony ze szczegółowym opisem.
margin- Własność zbiorcza umożliwiająca ustawienie marginesu fizycznego z dowolnej liczby stron.
margin-block- Własność zbiorcza ustawiająca logiczny margines blokowy początkowy (margin-block-start) i końcowy (margin-block-end).
margin-block-end- Ustawia logiczny margines blokowy końcowy.
margin-block-start- Ustawia logiczny margines blokowy początkowy.
margin-bottom- Ustawia fizyczny margines dolny.
margin-inline- Własność zbiorcza ustawiająca logiczny margines śródliniowy początkowy (margin-inline-start ) i końcowy (margin-inline-end).
margin-inline-end- Ustawia logiczny margines śródliniowy końcowy.
margin-inline-start- Ustawia logiczny margines śródliniowy początkowy.
margin-left- Ustawia fizyczny margines lewy.
margin-right- Ustawia fizyczny margines prawy.
margin-top- Ustawia fizyczny margines górny.