Vlastnost hranice CSS řídí vnější prvky prvku. Může být použit k nastavení vzdálenosti mezi přilehlými bloky nebo přesunutí podřízeného uzlu od rodičovské hranice. Okraje se nezúčastní blokového modelu CSS a nezadávají se do šířky a výšky prvku.

Syntaxe vlastností

K dispozici je obecná vlastnost okraje CSS, pomocí níž můžete zadat hodnoty všech zářezů najednou, stejně jako čtyři oddělené vlastnosti pro každou stranu:

margin-left;

pravý okraj;

nahoře;

dolní okraj.

Definujte hodnotu odsazení v pixelech, relativní jednotky (em, rem) nebo procenta. V druhém případě 100% vždy přijme šířku rodičovského prvku, a to i pro horní a spodní stranu.




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

Okraj CSS může být záporný.

Při použití skupinové syntaxe musíte předat jeden až čtyři parametry tím, že seznam stran ve správném pořadí.

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

prvek {
 margin: 20px; 
} 

prvek {
 okraj: 20px 30px; 
} 

element {
 okraj: 20px 30px 40px;


prvek {
 okraj: 20px 30px 40px 50px; 
}

Algoritmy pro výpočet intervalů

Vlastnost okraje CSS nenízděděný a ve výchozím nastavení je nulový. Zdálo by se, že nejprve by neměl mít žádný prvek na stránce vnější zářezy, ale není. Prohlížeče z vlastního podnětu nastavují formátování řady značek, například seznamů. Při vytváření rozvržení je důležité to vzít v úvahu.

Specifikace definuje chování okrajů uzlů s odlišným typem odrazu. Položky řetězce tedy ignorují hodnotu horní a dolní odrážky, i když jsou přímo zadány tak, aby nedošlo k porušení struktury řádku.

Bloky a řetězce adekvátně odrážejí 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é.

Zánik marže

Na obrázku jsou dva prvky umístěné jeden po druhém s nainstalovanými vnějšími zarážkami. V první verzi jsou kombinovány spodní a horní okraje bloků, v druhé jsou složeny. Jaký typ chování je logičtější?

Bloky prvků v CSS se chovají v prvním typu, a na druhé straně naléhavé bloky a flex-kontejnery. V tomto případě jsou pouze svislé zarážky komprimovány, vodorovné jsou vždy sestaveny.

Provedení marhyna otce

je v jednotkách bloků je dalším FAD: v některých případech mohou být marhyn podřízený prvek považován za nadřazeného kontejneru. K tomu dochází, pokud existuje prvek ustoupit, který není od hranice oddělen jinými prvky, bez uzlu, bez rámce nebo polstrování.

Na obrázku je zobrazen dceřiný blok, který byl odečten v tom smyslu, že odchází od horní hranice rodičovského kontejneru. Místo toho byl okraj vynesen mimo otce a tlačil ho z okraje svého staršího předka.