marginWłaściwość określa zewnętrzną część wzoru pola, tworząc przestrzeń wokół elementu, całkowicie poza określonymi granicami.
Marginesy są ustawiane za pomocą długości, wartości procentowych lub słowa kluczowego autoi mogą mieć wartości ujemne. Oto przykład:
.box ( margin: 0 3em 0 3em; )margin jest skróconą własnością i akceptuje maksymalnie cztery wartości, pokazane tutaj:
.box ( margin: || || || )Jeśli ustawiono mniej niż cztery wartości, brakujące wartości są przyjmowane na podstawie zdefiniowanych. Na przykład następujące dwa zestawy reguł dałyby identyczne wyniki:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Tak więc, jeśli zdefiniowana jest tylko jedna wartość, ustawia to wszystkie cztery marginesy na tę samą wartość. Jeśli zadeklarowano trzy wartości, tak jest margin: (top) (left-and-right) (bottom);.
Dowolny z poszczególnych marginesów można zadeklarować metodą odręczną, w takim przypadku należy zdefiniować tylko jedną wartość na właściwość:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto i centrowanie
Każda z właściwości marginesu może również przyjmować wartość auto. Wartość w autozasadzie mówi przeglądarce, aby zdefiniowała za Ciebie margines. W większości przypadków wartość autobędzie równa wartości 0(która jest wartością początkową każdej właściwości marginesu) lub w innym przypadku, jakąkolwiek przestrzeń jest dostępna po tej stronie elementu. Jest jednak autoprzydatny do centrowania w poziomie:
.container ( width: 980px; margin: 0 auto; )W tym przykładzie wykonano dwie rzeczy, aby wyśrodkować ten element w poziomie w dostępnej przestrzeni:
- Element otrzymuje określoną szerokość
- Marginesy lewy i prawy są ustawione na
auto
Bez określonej szerokości autowartości zasadniczo nie miałyby żadnego wpływu, ustawiając lewy i prawy margines na 0lub w przeciwnym razie do dostępnej przestrzeni wewnątrz elementu nadrzędnego.
Należy również podkreślić, że autojest to przydatne tylko do wyśrodkowania w poziomie, więc użycie autodo marginesów górnych i dolnych nie spowoduje wyśrodkowania elementu w pionie, co może być mylące dla początkujących.
Zwijające się marginesy
Marginesy pionowe na różnych elementach, które się stykają (a zatem nie mają zawartości, wypełnienia ani oddzielających je granic) zwiną się, tworząc pojedynczy margines równy większemu z sąsiadujących marginesów. Nie dzieje się tak na marginesach poziomych (lewy i prawy), tylko pionowe (górny i dolny).
Aby zilustrować, weź następujący kod HTML:
Collapsing Margins
Example text.I następujący CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )W tym przykładzie h2element ma dolny margines o wartości 20 pikseli. Element akapitu, który występuje bezpośrednio po nim w źródle, ma górny margines ustawiony na 10 pikseli.
Zdrowy rozsądek sugerowałby, że grubość pionowego marginesu między h2akapitem a akapitem wyniosłaby łącznie 30 pikseli (20 pikseli + 10 pikseli). Jednak z powodu załamania marginesu rzeczywista grubość wynosi 20 pikseli. Jest to pokazane we wbudowanym piórze poniżej:
Chociaż na pierwszy rzut oka zwijające się marginesy mogą wydawać się nieintuicyjne, w rzeczywistości są przydatne z kilku powodów. Po pierwsze, zapobiegają dodawaniu przez puste elementy dodatkowej, zazwyczaj niepożądanej, pionowej przestrzeni na marginesie.
Po drugie, pozwalają na bardziej spójne podejście do deklarowania uniwersalnych marginesów w elementach strony. Na przykład nagłówki zwykle mają pionowy margines, podobnie jak akapity. Gdyby marginesy się nie zwijały, nagłówki po akapitach (lub odwrotnie) często wymagałyby zresetowania marginesów jednego z elementów, aby uzyskać stałą wielkość odstępów w pionie.
Po trzecie, zwijanie marginesów dotyczy również elementów zagnieżdżonych. Spójrz na następujący długopis:
Tutaj element akapitu ma górny margines ustawiony na 30 pikseli i jest zagnieżdżony wewnątrz divelementu z górnym marginesem 40 pikseli. Dodatkowo h2element ma dolny margines 20px.
Ponownie, zdrowy rozsądek sugerowałby, że całkowita pionowa przestrzeń marginesu wynosiłaby tutaj 90 pikseli (20 pikseli + 40 pikseli + 30 pikseli), ale zamiast tego wszystkie marginesy zwinięte są w pojedynczy margines 40 pikseli (najwyższy z trzech). Jest to pomocne w większości przypadków, ponieważ nie ma potrzeby ponownego definiowania górnych marginesów w celu usunięcia dodatkowej przestrzeni w pionie.
Ujemne marże
Jak można podejrzewać, podczas gdy dodatnia wartość marginesu odpycha inne elementy, ujemna margines albo pociągnie sam element w tym kierunku, albo przyciągnie inne elementy w jego kierunku.
Oto przykład pojemnika z dopełnieniem, a nagłówek h2 ma ujemne marginesy ciągnące się przez to wypełnienie z powrotem do krawędzi:
Zobacz
Najczęstszy przypadek użycia pióra dla ujemnych marginesów autorstwa Chrisa Coyiera (@chriscoyier) w
witrynie CodePen.
Oto przykład, w którym pierwszy akapit ma ujemny dolny margines, który przyciąga następny akapit.
Zobacz
artykuł Chrisa Coyiera (@chriscoyier)
o ujemnym marginesie pisaka, który wyciąga dolny akapit na CodePen.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Pracuje | Pracuje | Pracuje | Pracuje | Pracuje | Pracuje | Pracuje |
IE6 jest podatny na podwójny błąd float-margin, który w większości przypadków można rozwiązać, dodając display: inlinedo elementu pływającego.