Vlastnost okraje CSS: vnější odsazení prvků

Vlastnost hranice CSS řídí vnější vruby prvku. Pomocí této funkce můžete nastavit vzdálenost mezi sousedními bloky nebo přesunout podřízený uzel z nadřazené hranice. Okraje se nezúčastní blokového modelu CSS a nezadávají se do šířky a výšky prvku.

Vlastnost Syntax

K dispozici je společná vlastnost okraje CSS, pomocí které můžete určit hodnotu všech odsazení najednou, stejně jako čtyři oddělené vlastnosti pro každou stranu:

• margin-left;
• margin-right;
• horní okraj;
• dolní okraj.

Hodnotu odsazení můžete určit v pixelech, relativních jednotkách (em, rem) nebo v procentech. V druhém případě bude 100% šířka rodičovského prvku vždy akceptována, a to i pro horní a spodní stranu.

rodička {šířka: 500px; výška: 100px;} dítě {margin-left: 10% - // 500px * 10% = 50pxmargin-top: 10%

Okraj CSS může být negativní.

Při použití skupinové syntaxe je třeba přenést z jednoho na čtyři parametry a seznam účastníků ve správném pořadí.

• Jeden: pro všechny strany najednou.
• Dvě: pro horní a spodní stranu a pro boky odděleně.
• Tři: pro horní, boční a spodní stranu.
• Čtyři: vyjmenujte strany ve směru hodinových ručiček, začínající od vrcholu.

prvek {margin: 20px;} element {margin: 20px 30px;} prvek {margin: 20px 30px 40px;} element {margin: 20px 30px 40px 50px;}

Indentační algoritmy

Vlastnost okraje CSS není zděděná a ve výchozím nastavení je nulová. Zdá se, že zpočátku žádný prvek na stránce nesmí mít vnější zarážky, ale není. Prohlížeče z vlastního podnětu nastavují formátování pro několik značek, například seznamů. Je důležité zohlednit to při rozvržení.

Specifikace definuje chování okrajů uzlů s různými typy mapování. Prvky řádků tedy ignorují hodnotu horní a spodní odsazení, i když jsou výslovně specifikovány tak, aby nedošlo k narušení struktury řádku.

Bloky a řetězcové bloky adekvátně zobrazují okraje na všech čtyřech stranách, ale v některých případech může být chování této vlastnosti neočekávané.

Kolaps okrajů

Obrázek ukazuje dva prvky umístěné jeden pod druhým s nastavením externích zarovnání. V první variantě jsou kombinovány dolní a horní okraje bloků, ve druhé jsou přidány dohromady. Jaký typ chování je logičtější?

Bloky prvků v CSS se chovají podle prvního typu a čárového bloku a flex-kontejnerů - na druhém. V tomto případě se sblíží pouze vertikální odsazení, zatímco horizontální se vždy sčítají.

Odstranění okraje mimo rodičovství

Blokové uzly mají ještě jednu výjimku: v některých případech může být marginální podřízený prvek přenesen mimo nadřazenou kontejner. K tomu dochází, pokud není odsazovací prvek od hranice předku oddělen jinými prvky, textovým uzlem, rámem nebo polstrováním.

Obrázek ukazuje blok dítěte, který byl odsazen v očekávání, že se bude pohybovat od horní hranice nadřazeného kontejneru. Namísto toho byl okraj vyňat z rodičovských omezení a odtáhl ji od hranice starších předků.

Pokud rodič má rám, polstrování nebo vlastnost přetečení rovnající se skryté nebo rolovací, nedochází k odstranění okraje.

Zarovnání středu

Existuje známý trik, který vám umožní zarovnat element bloku ve středu rodiče pomocí vnějších odsazení. Chcete-li to provést, musíte nastavit šířku a nastavit levý a pravý okraj na automatické.

element {šířka: 400px; margin: 0 auto-}

V tomto případě existuje přerozdělení volného prostoru rovnoměrně na obou stranách prvku. Toto funguje pouze pro blokové uzly s určitou šířkou. Není-li velikost nastavena, blokový prvek se rozkládá na celý kontejner a nezanechává žádný prostor pro odsazení.