Rozpětí - Triky CSS

marginVlastnost definuje vnější část box modelu, vytváří prostor kolem prvku, mimo všechny definovaných hranic.

Okraje se nastavují pomocí délek, procent nebo klíčového slova autoa mohou mít záporné hodnoty. Zde je příklad:

.box ( margin: 0 3em 0 3em; )

margin je zkratková vlastnost a přijímá až čtyři hodnoty, které jsou uvedeny zde:

.box ( margin: || || || )

Pokud jsou nastaveny méně než čtyři hodnoty, předpokládají se chybějící hodnoty na základě definovaných hodnot. Například následující dvě sady pravidel by získaly stejné výsledky:

.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )

Pokud je tedy definována pouze jedna hodnota, nastaví se všechny čtyři okraje na stejnou hodnotu. Pokud jsou deklarovány tři hodnoty, je margin: (top) (left-and-right) (bottom);.

Libovolný z jednotlivých okrajů lze deklarovat pomocí longhand, v takovém případě byste definovali pouze jednu hodnotu pro každou vlastnost:

.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )

auto a centrování

Každá z vlastností okraje může také přijmout hodnotu auto. Hodnota v autopodstatě říká prohlížeči, aby pro vás definoval okraj. Ve většině případů bude hodnota autoekvivalentní hodnotě 0(což je počáteční hodnota pro každou vlastnost okraje) nebo jakémukoli prostoru, který je k dispozici na této straně prvku. Je však autoužitečné pro horizontální centrování:

.container ( width: 980px; margin: 0 auto; )

V tomto příkladu jsou provedeny dvě věci, aby se tento prvek vycentroval vodorovně v rámci dostupného prostoru:

• Prvek má zadanou šířku
• Levý a pravý okraj jsou nastaveny na auto

Bez zadané šířky autoby hodnoty v podstatě neměly žádný účinek, nastavení levého a pravého okraje na 0nebo jinak na jakýkoli dostupný prostor uvnitř nadřazeného prvku.

Je také třeba zdůraznit, že autoje to užitečné pouze pro horizontální centrování, a proto použití autopro horní a dolní okraj nebude centrovat prvek vertikálně, což může být pro začátečníky matoucí.

Sbalující se okraje

Svislé okraje na různých prvcích, které se navzájem dotýkají (tedy nemají žádný obsah, polstrování nebo hranice je oddělují), se sbalí a vytvoří jediný okraj, který se rovná většímu z přilehlých okrajů. To se neděje na vodorovných okrajích (vlevo a vpravo), pouze na svislých (nahoře a dole).

Pro ilustraci použijte následující HTML:

Collapsing Margins
Example text.

A následující CSS:

h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )

V tomto příkladu má h2prvek spodní okraj 20px. Prvek odstavce, který na něj ve zdroji bezprostředně navazuje, má horní okraj nastavený na 10 pixelů.

Zdá se, že zdravý rozum naznačuje, že tloušťka svislého okraje mezi h2odstavcem by byla celkem 30px (20px + 10px). Ale kvůli kolapsu okraje bude skutečná tloušťka nakonec 20px. To je ukázáno v níže vloženém peru:

Podívejte se na toto pero!

Ačkoli se na první pohled mohou kolabující okraje zdát neintuitivní, jsou skutečně užitečné z několika důvodů. Nejprve zabrání prázdným prvkům v přidávání dalšího, obvykle nežádoucího, svislého okrajového prostoru.

Zadruhé umožňují konzistentnější přístup k deklarování univerzálních okrajů napříč prvky stránky. Například nadpisy mají obvykle svislý okraj, stejně tak odstavce. Pokud se okraje nesbalily, nadpisy, které následují po odstavcích (nebo naopak), by často vyžadovaly resetování okrajů u jednoho z prvků, aby se dosáhlo konzistentního množství svislých mezer.

Za třetí, sbalení okraje platí také pro vnořené prvky. Podívejte se na následující pero:

Podívejte se na toto pero!

Zde má prvek odstavce horní okraj nastavený na 30 pixelů a je vnořený do divprvku s horním okrajem 40 pixelů. Kromě toho má h2prvek spodní okraj 20px.

Zdravý rozum by opět naznačoval, že celkový prostor svislého okraje by zde byl 90px (20px + 40px + 30px), ale místo toho se všechny okraje sbalí do jediného okraje 40px (nejvyššího ze tří). To je užitečné ve většině případů, protože není nutné předefinovat horní okraj, aby se odstranil další svislý prostor.

Negativní marže

Jak můžete tušit, zatímco kladná hodnota marže tlačí další prvky pryč, záporná marže buď vytáhne samotný prvek v tomto směru, nebo vytáhne další prvky směrem k němu.

Zde je příklad kontejneru s polstrováním a záhlaví h2 má záporné okraje, které se táhnou skrz toto polstrování zpět k okrajům:

Podívejte se na
Nejběžnější případ použití pera pro negativní marže od Chrisa Coyiera (@chriscoyier)
na CodePen.

Zde je příklad, kdy první odstavec má záporný spodní okraj, který táhne další odstavec proti.

Podívejte se na Pen
Negative Margin, který táhne spodní odstavec Chrisa Coyiera (@chriscoyier)
na CodePen.

Podpora prohlížeče

Chrome	Safari	Firefox	Opera	TJ	Android	iOS
Funguje	Funguje	Funguje	Funguje	Funguje	Funguje	Funguje

IE6 je náchylný k zdvojnásobené chybě float-margin, kterou lze ve většině případů vyřešit přidáním display: inlinek floatovanému prvku.