Hodnota marže a možnosti v CSS

Magistr CSS řídí odsazení prvků. Prvky v html jsou obdélníky. Mají okraje, okraje a polstrování.

Okrajová oblast je prostor mimo hranice prvku. Vlastnost se používá k nastavení vzdálenosti mezi prvky a jejich umístění na stránce.

Odsazení

Vlastnost okrajů v CSS lze nastavit na%, px, vh / vw, em a rem. Hodnota okraje může být zděděna z nadřazeného prvku (dědičná) nebo automaticky vypočtena prohlížečem (auto). Hodnoty pro okraj v CSS mohou být vyjádřeny mnoha způsoby (příklady jsou uvedeny v oddělitelných jednotkách v závislosti na velikosti písma prvku).

Způsoby nastavení hodnot pro odrážky:

• pro každou stranu (horní, pravá, spodní, levá) prvku (například je uvedena hodnota horní vnější odrážky od okraje středového prvku);

 .center {margin-top: 1em;} 

• pro opačné strany (nejprve hodnoty pro horní a spodní, pak pro levou a pravou);

 .center {margin: 1em, 0.5em;} 

• pro tři strany (hodnota horní hranice je označena jako první, druhá pro levou a pravou, pro třetí pro dolní část);

 .center {margin: 0em 1.1em 2em;} 

• pro každou stranu můžete zadávat hodnoty střídavě (okraj, okraj, atd.) nebo v jednom řádku od horní po levou ve směru hodinových ručiček;

 .center {margin: 0.5em 1em 1.5em 2em;} 

• hodnota okrajového prvku může být pro každou stranu stejná;

 .center {margin: 1em;} 

• hodnota okraje nemusí být nastavena;

• mezní hodnota může být záporná, například v CSS, horní okraj s negativní hodnotou posune element nahoru;

 .center {margin-top: -1em;} 

• všechny strany prvku mohou mít zápornou hodnotu marže a poté "uvolní" prostor pro své okolní prvky ze spodku a zprava a "hity" levého a horního prvku;

 .center {margin: -1em;} 

Záporná odrážka

Záporné odrážky se často používají k přesunutí prvku. Při použití negativního rozpětí uvolní prvek při přesunu prostor pro ostatní. Prvky, které mají použitou vlastnost, mohou protínají jiné prvky nebo umožňují ostatním prvkům, aby "samy přeběhli".

 .first {background-color: white;border: 0.06vw solid gold;box-shadow: 0 0 0.09vw gold;width: 50vw;padding: 2vw;margin-bottom: -1vw;margin-left: -9vw;}.second {background-color: black;color: white;font-size: 0.7rem;width: 10vw;padding: 0.5vw;margin-left: 27vw;} 

Pomocí záporného okraje vlevo a nahoře můžete "pohybovat" prvek doleva nebo nahoru. Pokud již existují objekty v místě, kde se prvek pohybuje, překrývá je.

Okraje vlevo a okraje okraje neovlivňují polohu prvku, na který jsou aplikovány, ale pro ostatní předměty se zmenší. Díky tomu je na obrázku blok s názvem autora citace "vystoupil" na blok s citátem.

Auto a dědictví

Použití funkce automatického zápisu v okně CSS pro okraje a textové zarovnání se středovou hodnotou má podobný efekt. Automatické zaostření prvku vodorovně ve stejné vzdálenosti od okrajů kontejneru.

Před zadáním hodnoty automatického uspořádání jsou prvky uspořádány jedna po druhé bez vnějších oddělených částí (pokud není zadána jiná hodnota okruhu) stejným způsobem, jako jsou uspořádány s nulovým rozpětím. Po zadání středové hodnoty se posune do středu řádku.

 .center {margin: auto;} 

Použití dědičné hodnoty znamená dedení hodnoty z nadřazeného prvku. Předpokládejme, že mateřský prvek má hodnotu v levém okraji CSS, středový prvek má hodnotu zadanou v předchozím příkladu.

 body {margin-top: 1em;}.center {margin: auto;} 

Nadřazený prvek, ve kterém jsou všechny ostatní prvky vloženy, se posunul poněkud nižší vzhledem ke své staré pozici. Pokud změníte hodnotu okraje středového prvku na zděděné, pak centrování zmizí jako výsledek a objekt, který dědí danou vlastnost, se bude stejným způsobem pohybovat dolů.

 body {margin-top: 1em;}.center {margin: inherit;} 

Použití CSS v těle Margin může vést k odsazení. Obvykle tělo nastaví okraj na nulu a polštářka se použije, je-li to nutné, pro odsazení od prvků.

Sousední předměty

Vzhledem k tomu, že vnější zarážky nejsou ve skutečnosti součástí samotného prvku, často nefungují přesně tak, jak by se předpokládalo pod vlivem jiných objektů. Jedním příkladem tohoto efektu je účinek odsazení.

Předpokládejme, že existují dva prvky, které jsou umístěny jeden pod druhým, mají nulové okraje. Pokud přidáte některý z těchto okrajů, nenulový okraj, můžete vidět, jak se jeden posunuje vzhledem k druhému prvku. Předepisujeme podobnou hodnotu jako druhý prvek, vidíme, že se v něm objevují vnější odsazení (pohybuje se vpravo od jeho staré pozice), ale vzdálenost mezi nimi se nezvyšuje, přestože jsou zarovnány podél vodorovné čáry.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 3vw;width: 10vw;} 

Podobný účinek bude pozorován, pokud nastavíte různé okraje pro dva prvky. Hodnota většího výhry vyhrává, tato hodnota se bude rovnat vzdálenosti mezi prvky.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 5vw;width: 10vw;} 

Vnořené položky

Okraj nepracuje správně s vnořenými zarovnanými prvky. Je-li horní odrážka předepsána pro nadřazené a podřízené elementy, pak bude fungovat pouze jedna z nich.

 .parent {width: 40vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 2vw;} 

Obrázek ukazuje příklady chování prvků a když jsou hodnoty okrajů nadřazeného a podřízeného prvku odlišné. Jak je vidět, má-li dítě vyšší hodnotu hraniční hranice než nadřazené nadřazené nadřazené nadřazené nadřazené nadřazené přesměrování, přesně podle hodnoty určené pro dítěti.

 .parent {width: 25vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 4vw;} 

Podobný účinek se projevuje v chování odsazení, když je výška nadřazeného automatického prvku nastavena na nižší odrážku nadřazeného a podřízeného prvku. Priorita větší odrážky se zachovává i v tomto případě.

 .parent {width: 25vw;height: auto;background-color: rgba(214, 254, 255, 0.82);margin-bottom: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-bottom: 4vw;} 

Prázdné položky

Prázdné prvky sbalí horní a dolní okraje. A formálně budou existovat, objekt se bude zvyšovat, ale ve skutečnosti budou vedle něj ovlivněny pouze jedna hodnota.

 .first {background-color: black;width: 10vw;}.second_empty {width: 10vw;margin-top: 5vw;margin-bottom: 10vw;}.third {background-color: rgba(199, 90, 175, 0.76);width: 10vw;} 

Výjimky a pravidla

V mnoha případech se zvažuje, že přidání dalších vlastností prvku umožňuje eliminovat výskyt kolapsu. Zmizení efektu kolapsu je způsobeno tím, že se odsazení dvou prvků přestalo zcela dotýkat.

Problémy se sbalováním mezi nadřazenými a podřízenými prvky lze předejít pouze vložením něčeho mezi ně, například přidáním ohraničení k podřízenému prvku. Aby nedošlo ke kolapsu mezi sousedními objekty, je lepší předepisovat okraj v jednom směru.

Některá společná pravidla pro použití okrajů:

• je lepší zapisovat odsazení v jednom směru pro všechny prvky (vpravo i dolů);
• vytvoření vzdálenosti mezi prvky by nemělo nastat na úkor podřízených prvků;
• odsazení dítěte uvnitř rodiče z hranic rodičů je předepsáno pomocí polstrování rodiče a nikoliv okraje dítěte.

Okraj v CSS je jedním z vlastností prvku, který umožňuje řídit jeho umístění na stránce ve vztahu k jiným objektům. Vlastnost má čtyři varianty, které umožňují změnit polohu prvku vodorovně a svisle. Jedním z problémů použití okraje je zhroucení odsazení (kombinace dvou oddělených částí do jednoho).