Navždy si pamatujme: jaký je rozdíl mezi marginem a paddingem. Padding, Margin and Border - nastavujeme vnitřní a vnější okraje v CSS, stejně jako okraje pro všechny strany (nahoře, dole, vlevo, vpravo) CSS syntax padding

Tato vlastnost může mít jednu až čtyři hodnoty.

Na obrázku světle šedá barva označuje oblast, za kterou je vlastnost výplně zodpovědná:

1. Když upřesníte čtyři hodnoty(5px 10px 15px 20px ) - pořadí odsazení bude následující: Horní(5 pixelů) - Že jo(10px) - dno(15 pixelů) - Vlevo, odjet(20px). Chcete-li si zapamatovat pořadí odsazení v jedné deklaraci, můžete použít anglické slovo TR ou BL e (kde T-horní, R-že jo, B- dno, L- vlevo, odjet).


2. Když upřesníte tři významy(5px 10px 15px ) - pořadí odsazení bude následující: Horní(5 pixelů) - Vpravo vlevo(10px) - dno(15px).


3. Když upřesníte dvě hodnoty(5px 10px ) - první hodnota (5px ) nastaví velikost výplně z horní a spodní části obsahu prvku, druhá (10px ) hodnota nastaví výplň vlevo a vpravo od obsahu prvku.


4. Když upřesníte jednu hodnotu(5px) - výplň na všech stranách bude mít stejnou velikost - 5px.

Podpora prohlížeče

Vlastnictví			Opera		IExplorer	okraj
vycpávka	1.0	1.0	3.5	1.0	4.0	12.0

Syntaxe CSS:

výplň: "délka | počáteční | dědit" ;

Syntaxe JavaScriptu:

object.style.padding = "5px"

Hodnoty majetku

CSS verze

CSS1

Zděděno

Ne.

Animovaný

Ano.

Příklad použití

Zdroj: okraj nebo výplň?
Filip Sporrer.
Překlad: vl49.

Kdy je lepší použít okraje a kdy odsazení pro účely formátování a záleží na tom?

Velmi dlouho jsem hledal vhodné odpovědi. A teprve po napsání spousty hrozného, ​​nečitelného kódu CSS, doprovázeného různými vedlejšími efekty, jsem mohl sebevědomě říci, že jsem našel základní pevná pravidla týkající se výše uvedených problémů.

Pro ilustraci se podívejme na typickou situaci, kterou pravděpodobně zná každý vývojář uživatelského rozhraní v roce 2017. Máme nejjednodušší šablonu karty.

V tomto příkladu lze rozlišit dva typy intervalů:

mezi kartami (modrá);

mezi kartami a jejich schránkou (zelená);

Zde je velmi důležité pochopit, že máme co do činění se dvěma různými pojmy, které by se při propojování neměly propojovat. Tedy pokud potřebuji změnit vzdálenost mezi kartami a jejich kontejnerem např. až na 24 pixelů, tak by to nemělo nijak ovlivnit rozestupy mezi kartami samotnými.

Implementace příkladu pomocí CSS?

Existují doslova tisíce způsobů, jak vytvořit takovou šablonu pomocí margins a paddingu, ale já bych vám rád představil jeden z nich, který demonstruje správné použití vlastností margin a padding. Navíc vám tato metoda umožňuje přidat další karty později.

Kontejner(
výplň: 16px
}
.card + .card(
okraj: 0 0 0 8px;
}

Jen 2 selektory a 2 pravidla.

Jaká je funkce znaménka plus?

Symbol + představuje sousední volič. Ukazuje pouze na prvek bezprostředně následující za prvkem zadaným před tímto selektorem.

Jak můžete vidět na obrázku výše, v našem případě bude tento selektor vybírat každé kartě předchází každá druhá karta. Takže pomocí sousedního voliče můžeme nastavit levý okraj pro každou kartu kromě první.

To znamená, že máme možnost přidat libovolný počet karet, které potřebujeme, přičemž vzdálenost mezi nimi bude vždy osm pixelů.

Vše funguje dobře, dokud nepotřebujeme ke kartám přiložit něco jiného než kartu. No, řekněme tlačítko "Přidat kartu" ("Přidat kartu"):

Na základě fragmentu CSS, který již máme, bychom pravděpodobně novému prvku, který představuje tlačítko, nepřiřadili třídu .card, protože to není karta. Jak být? Vyplatí se vytvořit další název třídy .add-card , který obsahuje stejné pravidlo s vlastností margin jako třída .card? Ne, existuje lepší řešení.

Lobotomizovaná sova **+* .

A jak to vypadá. Přes vtipnou asociaci tato metoda funguje skvěle a od té doby, co jsem se o ní dozvěděl, ji používám neustále. Takže, k čemu to všechno je? Zde je pohled na příslušný kód CSS:

Kontejner(
výplň: 16px
}
/* No, poznali jste lobotomizovanou sovu? */
.container > * + * (
okraj: 0 0 0 8px;
}

Jak si jistě pamatujete, předchozí selektor se vztahoval na jakoukoli kartu, které předcházela jiná karta. Nyní s jeho pomocí můžeme formátovat každému prvku bezprostředně předchází jakýkoli jiný prvek, samozřejmě včetně tlačítka.

Nakonec.

Upřímně doufám, že vám zde prezentovaný materiál pomohl zjistit, kdy použít výplň k oddělení obsahu obsaženého v kontejneru a kdy použít okraje.

Na závěr bych vám rád předložil k posouzení návrh pera, který demonstruje výše uvedené příklady a také dvě pravidla, která jsou ověřena vlastní zkušeností. Takže používáme:

vycpávka- pro mezery mezi nádobou a jejím obsahem.

okraj- pro mezery mezi prvky uvnitř nádoby.

Zobrazení příspěvku: 427

Tato příručka vám pomůže lépe porozumět vlastnostem CSS, jako je okraj, odsazení a okraj. Tyto vlastnosti jsou velmi užitečné pro vývojáře k umístění prvků na stránce podle rozvržení.

Vytvořme div a dáme mu vlastnosti margin, padding a border.

Vlastnost výplně

Vlastnost CSS padding definuje vzdálenost mezi okrajem prvku a jeho obsahem. Můžete to definovat takto:

• padding-top: 10px;
• padding-right: 10px;
• vycpávka: 10px
• padding-left: 10px

Tento záznam lze zkrátit:

• padding:25px 50px 75px 100px;
  • horních 25 pixelů
  • vpravo 50px
  • spodní 75 pixelů
  • vlevo 100px
• padding:25px 50px 75px;
  • horních 25 pixelů
  • vpravo a vlevo 50px
  • spodní 75 pixelů
• padding:25px 50px;
  • horní a dolní 25px
  • vpravo a vlevo 50px
• padding:25px;
  • všech 25px

Poznámka: Hodnota výplně se přičte k šířce prvku a závisí na pozadí prvku.

Jinými slovy, máme prvek div s třídou div-1:

Div.div-1( šířka: 150px; odsazení: 25px;)

Prohlížeč přidá k šířce prvku levé a pravé odsazení. Ve výsledku získáme prvek o šířce 200px.

Pohraniční nemovitost

Vlastnost CSS border umožňuje definovat styl a barvu ohraničení prvku.

hranice-šířka

Vlastnost border-width se používá k určení šířky ohraničení. Šířka se zadává v pixelech nebo pomocí jedné z předdefinovaných hodnot: tenký (tenký), střední (střední) nebo tlustý (tlustý).

barva ohraničení

Vlastnost border-color se používá k definování barvy ohraničení. Barvu lze nastavit následujícími způsoby:

• jméno - název barvy, například "červená"
• RGB – definuje hodnotu RGB, například „rgb(255,0,0)“
• Hex - definuje hexadecimální hodnotu, například "#ff0000"

styl ohraničení

• tečkovaný: Definuje přesnou hranici
• čárkovaná: Definuje tečkovaný okraj
• pevný: Definuje silné ohraničení
• dvojnásobek: Definuje dvě hranice. Vzdálenost mezi nimi závisí na hodnotě border-width
• drážka: Definuje trojrozměrné odsazené ohraničení
• hřbet: Definuje 3D zvýšený okraj
• vložka: Definuje hranici tak, aby se blok kýval odsazeně
• začátek: Definuje hranici tak, aby se blok kolébal konvexně

Vlastnosti ohraničení prvku můžete napsat zkráceným způsobem:

Div.div-2( border:1px solid #ccc; )

Maržová vlastnost

Vlastnost CSS margin definuje mezery kolem prvku. Okraj uvolní určité místo kolem prvku (mimo ohraničení). Okraj nemá žádnou barvu pozadí a vždy zůstává průhledný.

Hodnoty okrajů pro prvek můžete definovat takto:

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

Tento záznam lze zkrátit:

• margin:25px 50px 75px 100px;
  • horní okraj 25px
  • pravý okraj 50px
  • spodní okraj 75px
  • levý okraj 100px
• margin:25px 50px 75px;
  • horní okraj 25px
  • pravý a levý okraj 50px
  • spodní okraj 75px
• margin:25px 50px;
  • horní a dolní okraj 25px
  • pravý a levý okraj 50px
• margin:25px;
  • všechny čtyři okraje 25px

Pomocí výchozích hodnot okrajů můžete rámeček vycentrovat vodorovně.

V předchozí kapitole jsme zmínili CSS vlastnosti jako margin (pole) a padding (indent). Nyní se jim budeme věnovat podrobněji a zvážit, jak se od sebe liší a jaké mají vlastnosti.

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

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

Jak vidíte, okraje CSS a odsazení jsou různé, 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ž pro blok obsahu není žádný rámec nebo pozadí.

Chcete-li nastavit okraj nebo odsazení v CSS z každé strany prvku, existují následující vlastnosti:

Odrážky:

• horní vycpávka: 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é jednotce CSS - px, em, %, atd. Příklad: margin-top: 15px .

Existuje také velmi šikovná věc jako CSS zkratka pro margin a padding. Pokud potřebujete nastavit okraje nebo odsazení pro všechny čtyři strany prvku, není nutné psát vlastnost pro každou stranu zvlášť. Vše je jednodušší: pro okraj a odsazení můžete zadat 1, 2, 3 nebo 4 hodnoty najednou. Způsob distribuce nastavení závisí na počtu hodnot:

• 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: padding je nastaven nejprve pro horní stranu, poté pro levou i pravou stranu a poté pro spodní: padding: 3px 6px 9px;
• 2 hodnoty: padding se nastavuje nejprve současně z horní a spodní strany a poté - současně pro levou a pravou stranu: padding: 6px 12px;
• 1 hodnota: nastavit stejné odsazení pro všechny strany prvku: odsazení: 3px;

Stejná pravidla platí pro vlastnost margin CSS. Všimněte si, že pro okraj můžete také použít záporné hodnoty (například -3px), což může být někdy docela užitečné.

hroutící se okraj

Představte si situaci: dva prvky bloku jsou nad sebou a mají okraje. Horní blok je nastaven na margin: 60px a spodní blok je nastaven na margin: 30px . Bylo by logické předpokládat, že dva hraniční okraje dvou prvků se jednoduše dotýkají a v důsledku toho by mezera mezi bloky byla 90 pixelů.

Věci se však mají jinak. Ve skutečnosti se v takové situaci projeví efekt, kterému se říká kolaps, kdy se ze dvou sousedních elementových polí vybere to největší. V našem příkladu bude výsledná mezera mezi prvky 60 pixelů.

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

Sbalené okraje fungují pouze pro horní a dolní okraje prvků a nevztahují se na okraje na pravé a levé straně. Konečná hodnota mezery se počítá v různých situacích různými způsoby:

• Když jsou obě hodnoty okraje kladné, konečná velikost okraje bude větší hodnotou.
• Pokud je jedna z hodnot záporná, je nutné získat součet hodnot pro výpočet velikosti pole. Například s hodnotami 20px a -18px bude velikost pole:
  20 + (-18) = 20 - 18 = 2 pixely.
• Pokud jsou obě hodnoty záporné, porovná se modul těchto čísel a vybere se číslo s vyšším modulem (proto menší ze záporných čísel). Příklad: chcete porovnat hodnoty polí -6px a -8px . Moduly porovnávaných čísel jsou 6 a 8. Z toho vyplývá, že 6 -8 . Konečná velikost pole je -8 pixelů.
• V případě, že jsou hodnoty specifikovány v různých jednotkách CSS, jsou redukovány na jednu, poté jsou porovnány a je vybrána větší hodnota.
• Velikost okraje pro podřízené prvky je ještě zajímavější: pokud má podřízený okraj větší než rodič, je mu dána přednost. V tomto případě se velikost horního a dolního okraje rodiče shoduje s velikostí nastavenou pro potomka. V tomto případě nebude mezi rodičem a dítětem žádná vzdálenost.