nadpis v části o sedmi slovech

Nejvíc prostý důvod kterého se vyplatí držet tento princip, je to proto, aby bylo v budoucnu snazší najít odsazení, ať už pro vás, nebo pro někoho, kdo bude s vaším rozvržením v budoucnu pracovat. Tady jde o pohodlí.

Skutečné problémy mohou nastat, když jsou rozvržení se špatnou strukturou odsazení vykreslována dynamicky nebo duplikována.

U nezávislých prvků (blok BEM) nelze nastavit odsazení

Pokud potřebujete odsadit blok. Bez předsudků se to provádí pomocí:

• Dědičnost prostřednictvím prvku (pokud tento blok vytáhnete z prvku, nebude zde žádné odsazení a můžete jej jednoduše umístit na jiné místo).
• Přidání třídy (z bloku můžete udělat prvek).
• Wrapper (jako blok, který má roli, pouze v umístění).

Poslední prvek skupiny má odsazení resetováno na nulu (vždy)

Pro poslední li se odsazení vynuluje. A odsazení je provedeno mezi sousedními prvky ul a img. O čem se mluvilo ve druhém principu.

Vezměme si další příklad:

Zajímá nás rozpětí mezi novinkami, které je set.blog-preview__item (margin-bottom: 20px;). Poslední okraj je resetován na nulu a spodní odsazení je provedeno pomocí odsazení blog-preview . O čem se mluvilo ve druhém principu.

Častěji než jiné pseudotřídy byste měli používat:last-child.

Item:not(:last-child) ( margin-bottom: 20px; ) // nebo // .item ( // jiné styly // margin-bottom: 20px; &:last-child ( margin-bottom: 0; ) ) // nebo margin-top, hlavní myšlenka zde není ve směru okraje, ale bez přebytečných // .item + .item ( margin-top: 20px; ) // nebo // .item ( / / další styly // & + & ( margin-top: 20px; ) )

Výjimky

Samozřejmě existují speciální případy, netriviální úkoly a nuance, ve kterých není možné tyto zásady dodržovat, ale jinak stojí za to usilovat o ideální odsazení, aby bylo rozložení co nejčistší.

P.S. Doporučuji si publikaci přečíst

Popis

Nastaví míru odsazení od každého okraje prvku. Okraj je prostor od okraje aktuálního prvku k vnitřnímu okraji jeho nadřazeného prvku (obr. 1).

Rýže. 1. Odsazení od levého okraje prvku

Pokud prvek nemá rodiče, bude padding vzdálenost od okraje prvku k okraji okna prohlížeče s přihlédnutím k tomu, že samotné okno má ve výchozím nastavení také nastaveno odsazení. Chcete-li se jich zbavit, měli byste nastavit hodnotu okraje pro selektor rovna nule.

Vlastnost margin umožňuje nastavit hodnotu okraje pro všechny strany prvku najednou nebo ji definovat pouze pro určené strany.

Syntax

marže: [hodnota | zájem | auto] (1,4) | zdědit

Hodnoty

Můžete použít jednu, dvě, tři nebo čtyři hodnoty oddělené mezerou. Účinek závisí na počtu hodnot a je uveden v tabulce. 1.

Míru odsazení lze zadat v pixelech (px), procentech (%) nebo jiných jednotkách přijatelných pro CSS. Hodnota může být kladné nebo záporné číslo.

Auto Určuje, že velikost odsazení bude automaticky vypočítána prohlížečem. inherit Zdědí hodnotu rodiče.

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 2.

Rýže. 2. Použití vlastnosti margin

Objektový model

document.getElementById("elementID ").style.margin

Prohlížeče

Internet Explorer 6 v režimu quirk nepodporuje vystředění bloku pomocí automatického pravidla margin: 0. V tomto prohlížeči je také chyba se zdvojnásobením levé nebo pravé hodnoty odsazení pro plovoucí prvky vnořené do nadřazených prvků. Okraj, který sousedí se stranou rodiče, se zdvojnásobí. Problém se obvykle řeší přidáním display: inline do plovoucího prvku.

Verze aplikace Internet Explorer do 7.0 včetně nepodporují dědičnou hodnotu.

Poznámka

U blokových prvků umístěných svisle vedle sebe je pozorován srážecí efekt, když odsazení nejsou sečtena, ale vzájemně kombinována. Samotné sbalení působí na dva nebo více bloků (jeden může být vnořen do druhého) s odsazením nahoře nebo dole, zatímco sousední odsazení se spojí do jednoho. U výplně vlevo a vpravo se sbalení nikdy nepoužije.

Sbalení nefunguje:

• pro prvky, které mají vlastnost padding nastavenou na sbalovací straně.
• pro prvky, které mají hranici určenou na sbalovací straně;
• na prvcích s absolutním polohováním, tzn. ty, jejichž pozice je nastavena na absolutní ;
• na plovoucích prvcích (pro které je vlastnost float nastavena na left nebo right );
• pro inline prvky;
• Pro .

Od autora: Když jsem se poprvé začal učit CSS, stále jsem měl zmatek ohledně marginu a paddingu. Vypadaly velmi podobně a v některých případech dávaly stejný výsledek. V tomto tutoriálu uvidíte rozdíl mezi CSS margin a padding a jak tyto vlastnosti ovlivňují prostor mezi prvky na stránce. Probereme také kolabující okraje a používání různých jednotek měření při vytváření responzivních webů. Článek zakončíme několika tipy k rozvržení pomocí okrajů a odsazení.

Blokový model

Prvky v CSS jsou reprezentovány jako obdélníkové rámečky. Velikost obdélníkového bloku je určena vlastnostmi prvku: obsah, výplň, rámeček, okraj.

Oblast obsahu prvku je umístěna uprostřed. Dále výplň obklopí oblast obsahu. Rám obklopuje vycpávku a okraj je vnější vrstva, tzn. je mimo živel. Abychom lépe pochopili, o čem mluvíme, níže je schéma.

Jak můžete vidět z diagramu, výplň je vrstva, která rozšiřuje prvek od vnějšího okraje oblasti obsahu k vnitřnímu okraji rámečku. Tato vlastnost řídí vzdálenost mezi okrajem prvku a jeho obsahem. Výplň ovlivňuje velikost prvku na stránce, ale nemá žádný vliv na mezery mezi prvky na stránce.

Pokud potřebujete zvětšit nebo zmenšit vzdálenost mezi prvky, použijte okraj. Vlastnost margin nijak neovlivňuje velikost prvku.

Je důležité si uvědomit, že velikosti všech bloků na webové stránce závisí na použitém modelu bloku. Existují dva blokové modely: blokový model W3C, tradiční blokový model.

Podle blokového modelu W3C se šířka prvku vypočítá z obsahu bloku bez zohlednění odsazení a okraje. Odsazení a ohraničení jsou přidány nad zadané rozměry, což může mít nepředvídatelné účinky na rozvržení stránky.

Vezměme si například blok o šířce 200px a výšce 200px, odsazení 10px na všech stranách a ohraničení 2px na všech stranách. Prohlížeč nevidí blok 200px. Prohlížeč vypočítá horizontální prostor potřebný k zobrazení bloku a je 224px: 200(šířka)+2(levý okraj)+10(levý výplň)+10(pravý výplň)+2(pravý okraj)=224px. Protože se jedná o čtverec, výška bude také 224 pixelů.

Na druhou stranu tradiční blokový model bere jako šířku součet obsahu, odsazení a ohraničení. To znamená, že pokud je váš blok široký 200px, prohlížeč spočítá horizontální prostor potřebný k jeho zobrazení a bude mít 200px včetně odsazení a ohraničení. Výsledek je předvídatelnější a lépe se s ním pracuje.

Ve výchozím nastavení všechny prohlížeče používají blokový model W3C. Model lze nastavit ručně pomocí vlastnosti box-sizing. Jsou přijímány dvě hodnoty: content-box (W3C) a border-box (tradiční model). Tradiční model je intuitivnější, díky čemuž je mezi webovými vývojáři nejoblíbenější.

Zde je návod, jak použít velikost krabice k použití tradičního modelu ve vašem projektu:

html ( box-sizing: border-box; ) *, *:before, *:after ( box-sizing: inherit; )

Pokud si věci pamatujete rychleji, když je děláte sami, zkuste experimentovat se zábavnou interaktivní ukázkou Guye Routledge.

Nastavení okraje a odsazení

Vlastnosti padding-top, padding-right, padding-bottom a padding-left můžete použít k ovládání odsazení na všech čtyřech stranách prvku. Výplň lze také určit pomocí vlastnosti zkratky. Pokud je zapsána jedna hodnota výplně, CSS ji použije k určení výplně pro všechny 4 strany:

/* všechny 4 strany */ padding: 10px;

Pokud jsou uvedeny 3 hodnoty, první odpovídá za horní, druhá za levou a pravou a třetí za spodní:

/* nahoru | horizontální | dole */ výplň: 1em 20px 2em;

Pokud jsou uvedeny všechny 4 hodnoty, pak každá odpovídá za horní, pravou, dolní a levou:

/* nahoru | vpravo | dole | vlevo */ padding: 10px 10% 2em 15%;

V ukázce níže je oranžové pozadí oblastí obsahu různé prvky, bílá oblast mezi rámečkem a obsahem je výplň:

Vnější okraj, stejně jako výplň, lze ovládat na všech 4 stranách pomocí vlastností margin-top, margin-right, margin-bottom a margin-left. Můžete také nastavit okraj pro všechny 4 strany najednou pomocí vlastnosti zkratky.

/* všechny 4 strany */ okraj: 10px; /* vertikální | horizontální */ okraj: 2em 4em; /* nahoru | horizontální | dole */ okraj: 2em auto 2em; /* nahoru | vpravo | dole | vlevo */ okraj: 10px 10% 2em 15%;

Co si zapamatovat

Používejte správné měrné jednotky

Při práci s výplní a okrajem se vyhněte absolutním jednotkám měření. Takové jednotky se nepřizpůsobují změnám velikosti písma a šířky obrazovky.

Řekněme, že nastavíte šířku prvku na 50 % a okraj na 15 pixelů. Při šířce 1200px bude šířka prvku 600px a okraj bude 15px. Při šířce 769 pixelů bude šířka prvku 384 pixelů a okraj bude stále 15 pixelů.

Šířka prvku se změnila o 36 %, ale jeho okraj zůstal stejný. Ve většině případů to není nejvíce velký problém. Pokud se však ptáte okraj prvku procent, budete mít lepší kontrolu nad rozložením stránky na všech obrazovkách. Vše bude vypadat proporcionálně bez náhlých skoků v použitých hodnotách okrajů a odsazení.

Podobně můžete chtít přidat odsazení do textových prvků na stránce. Ve většině případů chcete, aby výplň byla úměrná velikosti písma na prvku. Na absolutní jednotky není možné to udělat. Pokud však nastavíte odsazení na em, automaticky se přizpůsobí velikosti písma. Níže uvedená ukázka ukazuje škálování v akci.

Jak prohlížeče počítají okraj a výplň pro různé měrné jednotky

Prohlížeče vypočítají konečné hodnoty okrajů a odsazení odlišně v závislosti na jednotkách měření.

Okraj a výplň, zadané v procentech, se počítají vzhledem k šířce kontejneru. To znamená, že 5% odsazení se bude rovnat 5 pixelům, pokud je šířka kontejneru 100 pixelů, nebo 50 pixelům, pokud je šířka kontejneru 1000 pixelů. Nezapomeňte, že horní a dolní hodnoty se také počítají na základě šířky kontejneru.

V případě em jsou okraje a odsazení založeny na velikosti písma tohoto prvku. V předchozí ukázce vycpávka na spodních třech textové prvky rovná se 1 em. Kvůli různé velikosti font, vypočítaná hodnota výplně bude vždy jiná.

K dispozici jsou také 4 jednotky měření vw, vh, vmin a vmax. V tomto případě budou hodnoty okraje a odsazení záviset na výřezu. Například padding 5vw se bude rovnat 25px s šířkou výřezu 500px a výplň 10vw se bude rovnat 50px na stejném výřezu. Tyto měrné jednotky si můžete podrobněji prostudovat v článku na webu SitePoint “CSS Viewport of Units of Measure: Quick Start”.

Pokud jste začátečník, znalost toho, jak tyto jednotky fungují, vám pomůže rychle pochopit, proč se odsazení a okraje u prvků HTML mění v závislosti na velikosti nadřazeného prvku, písma nebo dokonce výřezu. A to vám dá možnost ovládat rozvržení.

Zhroucení okrajů

Musíte také vědět o konceptu srážejících se okrajů. V určitých situacích se může horní a dolní okraj dvou prvků sbalit do jednoho. Tento jev se nazývá margin kolaps.

Řekněme, že máte dva prvky pod sebou, tzn. na stejné úrovni. Pokud nastavíte dolní okraj na 40 pixelů u prvního prvku a horní okraj na 25 pixelů u druhého, pak celková marže mezi prvky nebude rovna 65px. Odsazení bude rovna hodnotě větší marže, tzn. 40 pixelů.

Podobně se může zhroutit okraj mezi rodičem a prvním nebo posledním potomkem. K tomu dochází, pokud neexistuje žádný okraj, výplň nebo vložený obsah oddělující podřízené a rodičovské okraje. V tomto případě, pokud na nadřazeném prvku není žádná výplň nebo ohraničení, okraj podřízený prvek bude „plynout“ z rodiče.

Toto chování lze opravit. Chcete-li to provést, musíte přidat bariéru mezi nadřazený a podřízený okraj. Níže uvedená ukázka ukazuje, jak přidat ohraničení nebo výplň rodičovský prvek umožňuje opravit problém.

V případě záporných marží se konečná hodnota zhroucené marže rovná součtu kladné marže s nejmenší zápornou. Téma kolapsu okrajů si můžete podrobněji prostudovat v článku “Collapsing Margins” od Adama Robertse.

Zajímavé způsoby použití marginu a paddingu

Někdy může použití okrajů a odsazení vyřešit problémy s rozložením. Níže uvádíme několik příkladů:

Zachovat poměr stran obrazu

Obrázky na stránce mají často různé poměry stran. Pokud potřebujete zobrazit všechny obrázky se stejným poměrem stran, pomůže vám to CSS výplň.

Chcete-li to provést, musíte nastavit výšku rodiče na nulu a vlastnost padding-top nadřazeného prvku by se měla rovnat hodnotě poměru stran vyjádřené v procentech.

Například poměr stran 16:9 je dosažen pomocí odsazení: 56,25 % 0 0 0. Hodnota 56,25 se získá jako (9/16)*100. Pomocí této metody můžete vypočítat procenta výplně pro jakýkoli jiný poměr stran.

Závěr

Pokud se právě začínáte učit CSS, doufám, že vám tento tutoriál pomohl pochopit rozdíl mezi marginem a paddingem. Musíte se naučit, jak nastavit okraj a odsazení pomocí zkratek a příslušných měrných jednotek. V poslední části jsem ukázal dva zajímavé způsoby použití vlastností v rozvrženích a také vám poskytl odkazy na zdroje pro další učení. Pokud máte nějaké další tipy Okraj CSS a vycpávky, napište je do komentářů.

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

Kdy je lepší použít okraje pro účely formátování a kdy? vycpávka, a je v tom nějaký rozdíl?

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

Pro přehlednost se otočme na typická situace, kterou nejspíš zná každý vývojář uživatelské rozhraní v roce 2017. Máme jednoduchou šablonu karty.

V v tomto příkladu Existují dva typy intervalů:

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

Implementace příkladu pomocí CSS?

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

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

Jen 2 voliče a 2 pravidla.

Jakou funkci plní znaménko plus?

Symbol + představuje sousední volič. Ukazuje pouze na prvek, který bezprostředně následuje za prvkem uvedeným před tímto selektorem.

Jak je vidět z obrázku výše, v našem případě bude tento selektor vybírat každá karta, které předchází jakákoli jiná 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žadovaný počet karet, 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"):

Soudě podle existujícího fragmentu kódu CSS bychom s největší pravděpodobností nepřiřadili třídu .card k novému prvku představujícímu tlačítko, protože to není karta. Jak být? Má cenu kvůli tomu tvořit? dodatečné jméno class .add-card , která také obsahuje pravidlo s majetková marže jaká je třída .card? Ne, existuje lepší řešení.

Lobotomizovaná sova **+* .

Jak to vypadá? Přes vtipnou asociaci tato metoda funguje skvěle a od té doby, co jsem se o její existenci dozvěděl, ji používám neustále. Tak o co tady jde? Zde je pohled na odpovídající kód CSS:

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

Jak si možná 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ý prvek bezprostředně před ním je jakýkoli jiný prvek, samozřejmě včetně tlačítka.

Nakonec.

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

V důsledku toho bych vám rád předložil ke zvážení perový projekt demonstrující výše uvedené příklady a také ty, které byly testovány na vlastní zkušenost dvě pravidla. Takže použijme:

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

okraj— pro mezery mezi prvky uvnitř kontejneru.