V předchozí kapitole jsme se o nich zmínili Vlastnosti CSS, jako okraj (pole) a odsazení (odsazení). Nyní se na ně podíváme podrobněji a zvážíme, jak se od sebe liší a jaké mají vlastnosti.

Mezery mezi prvky můžete vytvořit jedním nebo druhým způsobem, ale pokud je odsazení odsazením od obsahu k okraji bloku, pak okraj je vzdálenost od jednoho bloku k druhému, meziblokový prostor. Snímek obrazovky ukazuje jasný příklad:

Výplň odděluje obsah od okraje bloku a okraj vytváří mezery mezi bloky

Jak můžete vidět, CSS okraje a padding se od sebe liší, i když někdy bez nahlédnutí do kódu není možné určit, která vlastnost se používá k nastavení vzdálenosti. K tomu dochází, když chybí rámeček nebo pozadí bloku obsahu.

K nastavení okraje nebo odsazení v CSS na každé straně prvku existují následující vlastnosti:

Výplň:

• polstrování vršku: význam;
• vycpávka vpravo: význam;
• spodní výplň: význam;
• polstrování vlevo: význam;

Pole:

• margin-top: význam;
• pravý okraj: význam;
• okraj-dole: význam;
• okraj-levý: význam;

Hodnoty lze zadat v libovolných jednotkách CSS - px, em, %, atd. Příklad: margin-top: 15px .

Existuje také velmi pohodlná věc, jako je zkratka pro margin a padding CSS. Pokud potřebujete nastavit okraje nebo odsazení na všech čtyřech stranách prvku, nemusíte nutně psát vlastnost pro každou stranu zvlášť. Vše je jednodušší: pro okraj a výplň můžete zadat 1, 2, 3 nebo 4 hodnoty najednou. Počet hodnot určuje, jak jsou nastavení distribuována:

• 4 hodnoty: padding je nastaven pro všechny strany prvku v následujícím pořadí: nahoře, vpravo, dole, vlevo: padding: 2px 4px 5px 10px;
• 3 hodnoty: výplň je nastavena nejprve pro horní stranu, poté současně pro levou a pravou stranu a poté pro spodní: výplň: 3px 6px 9px;
• 2 hodnoty: výplň se nastavuje nejprve současně z horní a spodní strany a poté současně pro levou a pravou stranu: výplň: 6px 12px;
• 1 hodnota: pro všechny strany prvku je nastaveno stejné odsazení: padding: 3px;

Stejná pravidla platí pro vlastnost margin CSS. Vezměte prosím na vědomí, že pro okraj můžete použít i záporné hodnoty (například -3px), což může být někdy docela užitečné.

Sbalit okraj

Představte si situaci: dva prvky bloku jsou umístěny nad sebou a jsou jim přidělena okrajová pole. Horní blok je nastaven na margin: 60px a spodní blok je nastaven na margin: 30px . Bylo by logické předpokládat, že dvě hraniční pole dvou prvků se budou jednoduše dotýkat a v důsledku toho bude mezera mezi bloky rovna 90 pixelům.

Věci se však mají jinak. Ve skutečnosti v takové situaci nastává efekt, který se nazývá kolaps, kdy se ze dvou sousedních polí prvků vybere největší velikost. V našem příkladu bude konečná mezera mezi prvky 60 pixelů.

Vzdálenost mezi bloky je rovna větší z hodnot

Sbalovací okraj funguje pouze pro horní a dolní okraje prvků a nevztahuje se na okraje na pravé a levé straně. Konečná hodnota mezery se v různých situacích počítá odlišně:

• Když jsou obě hodnoty marže kladné, bude výsledná velikost marže rovna větší hodnotě.
• Pokud je jedna z hodnot záporná, pak pro výpočet velikosti pole musíte získat součet hodnot. Například s hodnotami 20px a -18px bude velikost pole:
  20 + (-18) = 20 – 18 = 2 pixely.
• Pokud jsou obě hodnoty záporné, moduly těchto čísel se porovnají a vybere se číslo s větším modulem (tedy menší ze záporných čísel). Příklad: potřebujete porovnat hodnoty polí -6px a -8px. Moduly porovnávaných čísel jsou 6 a 8. Z toho vyplývá, že 6 -8. Výsledná velikost pole je -8 pixelů.
• V případě, kdy jsou hodnoty uvedeny v různé jednotky CSS se zredukují na jednu, poté se porovnají a vybere se větší hodnota.
• Velikost okraje pro podřízené prvky se určuje ještě zajímavějším způsobem: pokud má podřízený okraj větší než jeho rodič, je mu dána přednost. V tomto případě budou velikosti horního a dolního okraje nadřazeného prvku stejné jako u podřízeného. V tomto případě nebude mezi rodičem a dítětem žádná vzdálenost.

Okraje a odsazení jsou velmi důležité styly při vytváření stránky HTML. Umožňují přesněji umístit prvky, vytvořit rám s potřebnými mezerami atd. Oba styly jsou velmi podobné a plní podobné funkce. Ale stále existují rozdíly.

Prvky mohou být vnořené nebo umístěné vedle sebe. Podívejme se na následující příklad:

Máme dva stoly, citronový a modrý, umístěné pod sebou. Tabulky se skládají z jedné buňky. V první buňce tabulky je červený blok. Na tomto příkladu se podívejme, jak fungují okraje a odsazení.

Pole jsou nastavena stylem vycpávka. Tento styl se vztahuje pouze na prvky kontejneru, které mohou obsahovat další prvky. Styl umožňuje nastavit okraj mezi okraji prvku a jeho obsahem. Styl okraj umožňuje nastavit odsazení od prvku k nejbližším hranicím jiného prvku. Hranicemi jiného prvku mohou být hranice nadřazeného kontejneru i okraje samotné stránky.

Existuje několik způsobů, jak nastavit tyto styly. Například přímo zadejte velikost všech okrajů nebo odsazení jedním argumentem v nějaké měrné jednotce (px, ex, em, pt, cm atd.):

výplň: 3px; okraj: 3px;

V tomto případě budou okraje a odsazení na všech čtyřech stranách stejné. Při zadávání dvou argumentů oddělených mezerou:

odsazení: 3px 5px; okraj: 3px 5px;

první určí velikost okrajů/odsazení nahoře a dole, druhý vlevo a vpravo. Když jsou uvedeny tři argumenty:

odsazení: 3px 5px 2px; okraj: 3px 5px 2px;

první je okraj/odsazení nahoře, druhý je vlevo i vpravo, třetí je dole. Se čtyřmi argumenty:

odsazení: 3px 5px 2px 6px; okraj : 3px 5px 2px 6px ;

první je okraj/mezera nahoře, druhý je vpravo, třetí je dole, čtvrtý je vlevo. Je snadné si to zapamatovat: první je shora, pak ve směru hodinových ručiček. Kromě toho můžete nastavit okraje a odsazení pro konkrétní okraj samostatně pomocí příslušných stylů: polstrování-top, vycpávka-vpravo, vycpávka-dno, polstrování-vlevo, margin-top, okraj-pravý, okraj-dole, okraj-levý. Hodnotou těchto stylů může být pouze jeden argument, který určuje velikost okraje/výplně pro danou stranu.

Na obrázku je červený blok uvnitř buňky tabulky a sousedí s jejími okraji, to znamená, že buňka nemá žádné okraje. Nastavíme okraje buněk pomocí stylu:

výplň: 5px;

V důsledku toho se stránka změní na následující:

Podívejme se nyní na odsazení. Dvě tabulky sousedí vedle sebe, pokud je chceme trochu oddálit, můžeme použít odsazení. Zde jsou dvě možnosti: buď nastavit spodní odsazení první tabulky, nebo horní odsazení druhé tabulky. Použijme to druhé:

margin-top: 5px;

Upozorňujeme, že odsazení nastavujeme konkrétně na tabulku, a ne na buňku tabulky, jako je tomu u polí. Zde je výsledek:

Mimochodem, v prvním případě (mezera mezi červeným blokem a hranicemi nadřazené buňky) by se stejného efektu dalo dosáhnout nastavením odsazení bloku. Obecně platí, že pokud něco není jasné, dejte nám vědět v komentářích.

HTML kód experimentální stránky:

<html > <hlava > <titul > Test</title> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </hlava> <tělo > <styl > tabulka (šířka: 200px; výška: 150px; ohraničení: 1px plný #555; border-collapse: sbalit) td (vertikální zarovnání: nahoře; odsazení: 0px) div (šířka: 100px; výška: 100px; pozadí: červené)</styl> <styl tabulky = "pozadí: limetka" > <tr > <td style = "padding: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </tabulka> <styl stolu = "pozadí: skyblue; margin-top: 5px"> <tr > <td ></td> </tr> </tabulka> </body> </html> Polstrování-top

Doufám, že jste již obeznámeni se strukturou bloku. Pokud ne, je uveden níže.

Bloková struktura

Tak. Pravděpodobně již víte, že okraje a okraje bloku jsou reprezentovány vlastnostmi padding a margin. A v předchozím článku jsme se tohoto tématu již částečně dotkli. Na této stránce se blíže podíváme na pole ( vycpávka) a vycpávky ( okraj ).

Vlastnosti okrajů a odsazení jsou si navzájem velmi podobné a plní podobné funkce, proto jsou často zaměňovány. Ale samozřejmě byste to neměli dělat, protože okraje a odsazení jsou úplně jiné věci. To je však z obrázku dobře patrné, protože zde není znázorněno náhodou.

Tak. Okraje jsou určeny vlastností padding. Jedná se o vnitřní vzdálenosti od hranic bloku k jeho obsahu.

Tato vlastnost se vztahuje na všechny prvky.

Vzdálenost je uvedena v jednotkách délky CSS, %, nebo ( výchozí

Vlastnost padding je univerzální, protože nastavuje okraje od okrajů prvku k jeho obsahu pro všechny jeho strany, čímž kombinuje vlastnosti padding-top , padding-right , padding-bottom a padding-left , které nastavují šířku prvku. okraje pro každý boční prvek jednotlivě.

Odsazení se nastavuje pomocí vlastnosti margin, která určuje vzdálenost od hranic bloku k nejbližším prvkům nebo k okrajům okna prohlížeče.

Vlastnost margin platí také pro všechny prvky.

Odsazení je také specifikováno v jednotkách délky CSS, %, nebo ( výchozí) je automaticky detekován prohlížečem.

Vlastnost margin je univerzální, protože nastavuje míru odsazení od okrajů prvku pro všechny jeho strany, čímž kombinuje vlastnosti margin-top , margin-right , margin-bottom a margin-left , které nastavují šířku odsazení. od každého z okrajů prvku jednotlivě .

A ještě jedna věc: zářezy ( okraj) jsou umístěny mimo blok, zatímco okraje ( vycpávka) uvnitř, takže pozadí bloku nebo to obrázek na pozadí platí pouze pro okraje a odrážky jsou vždy průhledné nebo mají pozadí hlavního ( rodičovský) pozadí bloku nebo stránky.

Fragment kódu: