Horní okraj nefunguje. CSS margin:auto - Jak to funguje? Simulujte plovoucí chování přidělením dostupného prostoru

Když jsem viděl, když začátečníci při rozkládání stránky po stránce dělají spoustu chyb, odsazují okraje a úplně nerozumí tomu, jak tento okraj vlastně funguje, rozhodl jsem se napsat tento článek.

Určitě to bude užitečné pro začínající designéry uspořádání, ale pochybuji o tom pro profesionály, protože člověk, který se zabývá uspořádáním několik let, je již povinen „zapamatovat“ si všechny vlastnosti této nemovitosti zpaměti.

V této části článku budu psát o svislém okraji. O horizontále si povíme v příštím díle.

Pro začátek se stručně podívejme, jaké měrné jednotky existují, co znamenají a jaké okraje použít pro odsazení.

Cm, mm, palce, pc, pt – absolutní jednotky Měření. Doporučeno pro použití při tisku dokumentů.

Px, em, ex, % - relativní jednotky, se používají pro monitory.

Pro marži používám px A % , A em– k určení velikosti písma. Ex (v IE ex = em / 2) – nedoporučuji používat, protože je v každém prohlížeči interpretován jinak.

A obecně, v jaké jednotce byste zadali odsazení nebo velikost písma: prohlížeč vše převede na pixely, aniž by vzal v úvahu zobrazovanou oblast.

Oblast zobrazení je místo, kde uživatel vidí obsah webu bez posouvání obrazovky. Pro každého uživatele je to jiné.

Každý návrhář rozvržení ví, že jakýkoli prvek může být reprezentován ve formě 4 oblastí (okraj, okraj, odsazení a obsah).

Okraj - okraj. Konstrukce okrajů je odlišná vertikálně a horizontálně.

Jak jsem již psal výše, rozměry pro okraj lze nastavit v em, ex, px - pevné nastavení a v % - jsou počítány vzhledem k nějaké ploše.

Uvedu příklad jedné z častých chyb začínajících designérů layoutů.

Existují 2 divy: první a druhý div.


#První(
odsazení: 100px;
pozadí: #b5bcbc;
}
#druhý(
výška: 100px;
pozadí: #b06b48;
marže: 30 % 0 0;
}

Vezměte prosím na vědomí, že jsem nenastavil vlastnost width na žádný div (o tom si povíme později). Nyní nás zajímá pouze marže, která se rovná marži: 30% 0 0;

Doufám, že každý ví, jak se bere v úvahu marže v tomto případě, pro jistotu připomínám, že se počítá ve směru hodinových ručiček, to znamená: marže nahoře bude 30 %, vpravo 0, dole 0 a vlevo - protože jsem nic neuvedl , okraj má hodnotu protější strany, to znamená, že v tomto případě, pokud je okraj napravo 0, pak okraj nalevo, pokud není specifikován, je také 0.

Nyní nás ale zajímá rozpětí, které se rovná 30 %, známé také jako horní odrážka. Odkud pochází těchto 30 %?

Mnoho lidí věří a věří nesprávně, že 30 % je vzato z horní části celé stránky.


Ale to není pravda!

Vzhledem k tomu, že v tomto případě je druhý div vnořen do prvního divu, bude margin-top:30 % vypočítáno vzhledem k šířce druhého prvku div, to znamená vzhledem k šířce prvního prvku div!


V tomto případě je šířka prvního prvku ve výchozím nastavení automatická, takže prvek div přijímá vše volný prostor na šířku a z této šířky se vypočítá 30 % horního okraje pro druhý div.

Když je nadřazený prvek div menší, zmenší se také horní odsazení druhého prvku div.

Marže může být i záporná. V tomto případě prvek svisle umožňuje jinému prvku „jezdit“ na sebe nebo „pohybovat se dolů“ za hranice svého kontejneru.

Například: dva divy ležící pod sebou.

pokud přidáme margin-bottom: -100px k prvnímu divu a margin-top: -50px k druhému
#První(
výška: 200px;
pozadí: #69c;
okraj: 0 0 -100px;
}
#druhý(
výška: 200px;
pozadí: #f60;
okraj: -50px 100px 0;
}

Pak se stane následující.


Ale... tady dělají nováčci velkou chybu.

Mnoho lidí si myslí, že protože horní div má dolní okraj -100 pixelů a spodní div, horní okraj -50 pixelů, pak spodní div „přepíše“ horní o -150 pixelů.

Pokud jsou okraje stejného jména (obě okraje nebo záporné nebo kladné číslo), pak v tomto případě bereme velké číslo modulo a méně se nebere v úvahu.

V tomto případě bude spodní div překrývat horní div o 100 pixelů a 50 pixelů nebude zohledněno.

Totéž platí pro kladné okraje, spodní div se „posune“ od horního o 100 pixelů a 50 pixelů nebude zohledněno.

Zvažte následující příklad.
Existují 2 divy, jedna pod druhou.


#První(
výška: 200px;
pozadí: #69c;
okraj: 0 0 -100px;
}
#druhý(
výška: 200px;
pozadí: #f60;
okraj: 50px 100px 0;
}

První
druhý

Jak vidíte, spodní okraj první je záporný a horní okraj druhé kladný, co se stane v této situaci?

Pro opačné okraje dojde k sčítání, to znamená: -100 + 50 = -50. V souladu s tím se dolní div posune o 50 pixelů nahoru.

Dva divy, jeden vnořený do druhého.


#První(
pozadí: #b5bcbc;
}
#druhý(
výška: 200px;
pozadí: #b06b48;
}

Pokud k vnitřnímu divu přidáte horní okraj o velikosti 200 pixelů,
#druhý(
výška: 200px;
pozadí: #b06b48;
margin-top: 200px;
}

No a tady je další chyba! Někteří lidé věří, že vnitřní okraj by se měl „posunout“ o 200 pixelů dolů od svého rodiče, zatímco jeho rodič zůstane na místě, a tím se roztáhne.


Ale bez ohledu na to, jak to je!

Pokud nadřazený prvek nemá omezující faktory (o těchto faktorech budu psát níže), pak marže jde od vnitřní prvek navenek. Pak podle staré schéma je vybrán okraj: pokud mají stejný název, vybere se větší, pokud jsou opačné, dojde k přidání.
A výsledek


Co když to ale nepotřebujeme a chceme, aby nadřazený div zůstal na svém místě a podřízený div se posunul o 200 pixelů dolů?

Tuto akci ve vztahu k rodiči můžete zrušit několika způsoby.
1. přiřazení odsazení nadřazenému bloku
2. nastavení okraje k rodičovskému bloku
3. nastavení přetečení na rodičovský blok, jakákoli hodnota kromě viditelné (funguje všude kromě starého IE)
A voila


Děkuji za pozornost, snad jsem začátečníkům objasnil, co je marže a jak ji správně a odkud vypočítat.
Pokud byl článek užitečný a chcete si přečíst pokračování, pak v další části popíšu vodorovné okraje. Věci tam nejsou tak jednoduché, jak se na první pohled zdá ;)

Existuje několik pohledů na použití záporné okraje v CSS, a to jak ostře negativní, tak čistě pozitivní.

Negativní pole v CSS pravidlo jak následuje:

CSS

Záporná pole se obvykle používají v malých dávkách, ale jak uvidíte později, dokážou více. Existuje několik věcí, které potřebujete vědět o záporných okrajích (abyste se vyhnuli překlepům):

• Platnost v css
  W3C nám říká: ‛ Záporné hodnoty Pro vlastnosti okrajů je přípustné používat." Více podrobností na www.w3.org/TR/CSS2/box.html#margin-properties
• Záporné okraje nejsou HACK
  To pochází z nepochopení a z vnější vliv záporná marže pro rozložení. Jediný případ, kdy se záporná marže může stát hackem, je, když se pokoušíte opravit chybu ve svém kódu pomocí záporné marže.
• Vliv na průtok
  Záporné okraje neruší tok, když jsou aplikovány na „neplovoucí“ prvky. To znamená, že pokud použijete záporný okraj k posunutí prvku nahoru, všechny následující prvky budou rovněž posunuty nahoru.
• Odlišná reakce při použití ve spojení s plovákem
  Záporné okraje stále nejsou každodenní CSS, takže byste je měli používat opatrně.
• Některé problémy dreamweaver
  Tady není o čem diskutovat.
• Plná kompatibilita
  Záporné okraje jsou podporovány všemi prohlížeči, včetně IE6.

Práce se zápornými okraji (margin)

Záporné okraje jsou při správném použití velmi silné.

Obrázek ukazuje jak statický prvek reaguje na negativní pole.

• Když statický prvek obdrží záporný horní/levý okraj, prvek se „pohybuje“ v určeném směru (nahoře/doleva).

  CSS

  /* Prvek se posune o 10 pixelů nahoru */ #mydiv1 (margin-top:-10px;)
• Ale pokud jej použijete pro dolů/vpravo, pak se prvek nebude pohybovat směrem dolů/vpravo, jak předpokládáte. Místo toho to zatlačí následující prvek do hlavního prvku a překryje ho.

  CSS

  /* Všechny následující prvky za #mydiv1 se posunou o 10px nahoru, ale #mydiv1 samotný se neposune */ #mydiv1 (margin-bottom:-10px;)
• Pokud prvek nemá určenou šířku, pak použití záporného okraje ve směru doleva/doprava posune prvek v obou směrech, když se šířka prvku zvětší.

  CSS

  #mydiv1(margin:0 auto -20px; height: 150px; /*...*/) #mydiv2(margin:0 auto; height: 150px; /*...*/)

Záporná marže pro plovoucí prvky

Zvažte následující označení:

HTML

• Pokud se na plovoucí prvek použije záporný okraj, vytvoří se prostor, který způsobí překrytí obsahu. To je skvělé pro fluidní rozložení, kde je jeden sloupec 100% široký a druhý sloupec je např. pevná šířka na 100px.

  CSS

  #mydiv1 (float:left; margin-right:-100px;)
• Pokud jsou oba prvky float:left a #mydiv1 má margin-right:-20px , pak #mydiv2 zachází s #mydiv1, jako by byl o 20px menší než jeho skutečná šířka (tedy se překrývá). Zajímavé je, že obsah #mydiv1 na tyto manipulace nereaguje a zachovává si aktuální šířku.
• Pokud se záporný okraj rovná skutečné šířce, pak bude překrytí úplné. K tomu dochází, protože okraje, odsazení, okraje a šířka jsou přidány ke skutečné šířce prvku. Pokud se tedy záporný okraj rovná celkové šířce všech výše uvedených vlastností, skutečná šířka prvku bude 0.

Efektivní techniky založené na použití záporné marže

Od té doby, co jsme se dozvěděli, že existuje negativní pole platný kód, několik užitečné techniky CSS založené na této technice.

Pokud máte seznam s tolika položkami, že nemá smysl je zobrazovat svisle, proč seznam nerozdělit do tří sloupců?

Záporné okraje to zvládnou bez použití další značky A plovoucí vlastnosti. Je úžasné, jak snadné je rozdělit seznam do tří sloupců, jako je tento:

HTML

• Vejce
• Šunka
• Chléb
• Máslo
• Mouka
• Krém

Použití margin:auto k vystředění prvku bloku vodorovně je dobré známá metoda. Ale napadlo vás někdy, jak to funguje?

Účinek automatického závisí na typu prvku a kontextu. Pro horní polstrování CSS auto může znamenat jednu ze dvou věcí: zabírat veškerý volný prostor nebo 0 pixelů. V závislosti na tom bude specifikována jiná struktura.

"auto" - zabere veškerý dostupný prostor

Toto je nejběžnější způsob použití automatického odsazení. Pokud nastavíme auto pro levé a pravé odsazení jednoho prvku, zaberou rovnoměrně veškerý horizontální prostor dostupný v kontejneru. Tím se prvek umístí do středu.

Zobrazit příklad

Toto funguje pouze pro horizontální výplň. Ale nebude fungovat pro plovoucí a inline prvky. A také pro absolutně a pevně umístěné prvky.

Simulujte plovoucí chování přidělením dostupného prostoru

automaticky rozdělí veškerý volný prostor rovnoměrně mezi pravý a levý okraj. Co se ale stane, když tuto hodnotu nastavíme pouze pro jednu z výplní? Poté zabere veškerý dostupný prostor a prvek bude posunut k pravému nebo levému okraji.

Zobrazit příklad

„auto“ – nastavte 0 pixelů

Jak bylo uvedeno výše, automatické nefunguje pro plovoucí, vložené nebo absolutně umístěné prvky. Pro ně již byla definována struktura, takže se používají marže auto to nedává smysl.

Tím se pouze naruší původní struktura. Včetně CSS pro odsazení textu nahoře. Auto proto nastaví odsazení těchto prvků na 0 pixelů.

Auto nebude fungovat ani pro standard blokový prvek, pokud pro něj není zadána šířka. Ve všech příkladech, které jsem uvedl, měly prvky specifikovanou šířku.

Hodnota auto bude definovat výplň 0 pixelů, když je šířka prvku bloku nastavena na auto nebo 100 %. Obvykle zabírá celou šířku kontejneru, takže na šířku výplně zbude 0 pixelů.

Co se stane s vertikálním odsazením, když je nastaveno na automatické?

auto pro horní i spodní výplň CSS se vždy počítá jako 0 pixelů ( s výjimkou absolutně umístěných prvků). Specifikace W3C uvádí následující:

"Pokud je 'margin-top' nebo 'margin-bottom' nastaveno na 'auto', jsou nastaveny na 0."

Je to dáno tím, že na webové stránce jsou všechny prvky nejčastěji rozmístěny vertikálně. Centrováním výšky prvku v kontejneru tedy nedosáhneme toho, že se bude jevit vertikálně vystředěný vzhledem k samotné stránce, jak se to děje u horizontálního centrování.

Nebo je to možná ze stejného důvodu, proč se rozhodli přidat výjimku pro absolutně umístěné prvky, které lze svisle vycentrovat vzhledem k celkové výšce stránky.

Nebo protože efekt kombinace odsazení (sloučení odsazení sousedních prvků). Toto je další výjimka tohoto pravidla určení vertikálních posunů.

Centrování absolutně umístěných prvků

Vzhledem k tomu, že existuje výjimka pro absolutně umístěné prvky, můžete je pomocí automatického vycentrovat svisle a vodorovně. Nejprve ale musíme zjistit, kdy margin:auto bude fungovat přesně takto pro horní výplň CSS.

Další specifikace W3C říká:

„Pokud jsou všechny tři polohy („levá“, „šířka“ a „pravá“) nastaveny na „auto“, nejprve nastavte „margin-left“ a „margin-right“ na 0...
» Pokud je "auto" zadáno pouze pro "margin-left" a "margin-right", vyřešte rovnici pomocí dodatečná podmínka aby obě vycpávky měly stejnou šířku."

Zde je podrobně popsána situace ohledně automatické hodnoty pro horizontální výplň. Aby bylo zajištěno, že tyto výplně mají stejnou velikost, neměly by být levá , šířka a pravá nastavena na auto ( jejich výchozí hodnotu). Chcete-li prvek vycentrovat vodorovně, musíte nastavit konkrétní hodnotu pro šířku absolutně umístěného prvku a levá a pravá strana musí mít stejné hodnoty.

Ve specifikaci také zmíněno něco podobného pro horní výplň CSS div.

"Pokud jsou 'top', 'height' a 'bottom' nastaveny na 'auto', nastavte 'top' na statický..."

"Pokud jedna ze tří pozic není nastavena na 'auto': Pokud jsou 'top' a 'bottom' nastaveny na 'auto', vyřešte rovnici s další podmínkou, abyste nastavili tyto výplně na stejné hodnoty."

Proto pro svislé vystředění absolutně umístěného prvku nesmí být horní , výška a spodní část nastavena na auto .

Když to všechno dáme dohromady, dostaneme následující:

Zobrazit příklad

Závěr

Pokud potřebujete přesunout prvek na stránce doprava nebo doleva bez prvků kontejneru ( například jako v případě plováku), nezapomeňte, že pro odsazení můžete použít auto.

Převod prvku na absolutně umístěný pouze za účelem jeho svislého vystředění ( horní výplň CSS), Ne nejlepší nápad. Existují další možnosti, jako je flexbox a CSS transformace které jsou k tomu vhodnější.

Překlad článku " CSS – margin auto – Jak to funguje“ připravil přátelský projektový tým.

Dobrý špatný