nadpis v časti so siedmimi slovami

Najjednoduchším dôvodom, prečo sa držať tohto princípu, je uľahčenie nájdenia odsadenia v budúcnosti, či už vám alebo niekomu, kto bude v budúcnosti pracovať s vaším rozložením. Vtedy hovoríme o pohodlí.

Skutočné problémy môžu nastať, keď sa rozloženie so zlou štruktúrou odsadenia vykresľuje dynamicky alebo duplikuje.

Nie je možné nastaviť zarážky pre nezávislé prvky (blok BEM)

Ak potrebujete odsadiť blok... Bez predsudkov sa to robí s:

• Dedenie cez prvok (ak tento blok stiahnete z prvku, nebude tam žiadne odsadenie a môžete ho jednoducho umiestniť inam).
• Pridanie triedy (z bloku môžete urobiť prvok).
• Wrapper (ako blok s úlohou len v polohovaní).

Posledný prvok skupiny je odsadený (vždy)

Pre posledné li je zarážka nulová. A odsadenie je hotové medzi susednými prvkami ul a obr. Čo bolo povedané v druhom princípe.

Zoberme si ďalší príklad:

Zaujíma nás rozpätie medzi novinkami, ktoré nastavuje.blog-preview__item (margin-bottom: 20px;). Posledný okraj sa vynuluje a spodný okraj sa urobí vyplnením náhľadu blogu. Čo bolo povedané v druhom princípe.

Častejšie ako iné pseudotriedy by ste mali používať: posledné dieťa.

Item: not (: last-child) (margin-bottom: 20px;) // or // .item (// other styles // margin-bottom: 20px; &: last-child (margin-bottom: 0;) ) // alebo margin-top, hlavná myšlienka tu, nie v smere okraja, ale bez prebytočných // .item + .item (margin-top: 20px;) // alebo // .item ( // iné štýly // & + & (margin-top: 20px;))

Výnimky

Samozrejme, existujú špeciálne prípady, netriviálne úlohy a nuansy, v ktorých nie je možné dodržať tieto zásady, ale inak by ste sa mali snažiť o ideálne zarážky, aby bolo rozloženie čo najčistejšie.

P. S. Odporúčam vám prečítať si publikáciu

Dobrý deň, milí čitatelia blogu. Dnes chcem pokračovať v téme štúdia a zvážiť pravidlá štýlu, ktoré vám umožňujú nastaviť výplň a okraje pre prvky Html: okraj, okraj a výplň.

Predtým sa nám podarilo naštudovať pomerne jednoduché vlastnosti, ktoré ovládali písma (), text () a zvažovali model

Áno, aj princípy používania sa nám podarilo zvážiť do všetkých detailov (natiahnutých cez niekoľko článkov). Teraz je čas prejsť k pravidlám, ktoré tvoria základ pre konštrukciu dokumentov (webových stránok) a začneme blokovým modelom (vzťah Html prvkov).

Vo všeobecnosti som už písal o modernom, no, ale dnes tu budú čisté špecifiká. Ak by ste si chceli prečítať predchádzajúce publikácie na túto tému, ste vítaní.

CSS box model - výplň, okraj a okraj

Po tretie, možno použiť úrok. Od čoho sa počítajú? Ukazuje sa, že od šírky nádoby(to znamená z oblasti obsahu nadradeného prvku). Navyše to platí nielen pre pravý a ľavý okraj, čo by bolo logické, ale pre horný a dolný okraj sa budú percentá počítať presne zo šírky (nie výšky) kontajnera.

Pri nastavovaní rozmerových hodnôt treba poznamenať, že Margin môže byť aj negatívna... Tie. pri zadaní kladnej hodnoty vonkajšieho okraja posunieme susedný prvok o zadanú vzdialenosť a ak je zadaná záporná hodnota, susedný blok sa jednoducho presunie na ten, pre ktorý sme nastavili tento záporný okraj. A to sa v CSS používa veľmi často.

Je samozrejmé, že existuje zložené pravidlo CSS Margin, ktoré v mnohých prípadoch umožňuje zmenšiť veľkosť kódu používaného na nastavenie požadovaných okrajov. Poradie hodnôt v ňom je prísne regulované (sú napísané cez znak medzery) a musí zodpovedať vzoru:

Tie. enumerácia začína hore a pokračuje v smere hodinových ručičiek až na koniec kruhu. Môže to vyzerať nejako takto:

Okraj: 20px 10px 40px 30px;

A to bude znamenať, že prehliadač musí odsadiť 20 pixelov nad naším blokom, 10 pixelov vpravo, 40 pixelov zdola a 30 pixelov vľavo. tento záznam bude ekvivalentný tomuto:

Zníženie kódu CSS je viditeľné voľným okom. Ale to nie je limit. V zloženom pravidle je úplne prijateľné použiť nielen štyri, ale aj tri, dve a dokonca iba jednu hodnotu. Čo ďalej pomôže znížiť veľkosť kódu. Počet hodnôt však bude možné znížiť iba v určitých prípadoch:

1. Ak sú okraje vľavo a vpravo rovnaké, napríklad takto: margin: 20px 30px 40px 30px;

   Posledné možno vynechať:

   Okraj: 20px 30px 40px;

   Tieto dve spoločné položky pravidiel robia to isté. Preto, ak vidíte záznam s tromi hodnotami v rozpätí, potom hodnotu štvrtej (vpravo) môžete vidieť v druhej (vľavo).

   V prípade rovnakých marží nad a pod tento trik už nebude fungovať, pretože logicky je možné zmenšiť štruktúru záznamu kolektívneho pravidla, len odrezanie duplicitných hodnôt od jeho konca(a hodnota dolného okraja bude predposledná).

2. Ak je okrem rovnosti vonkajších okrajov vľavo a vpravo aj rovnosť ich hodnôt hore a dole: margin: 20px 30px 20px 30px;

   alebo, čo je to isté (na základe klauzuly 1):

   Okraj: 20px 30px 20px;

   Takéto kolektívne pravidlo možno napísať iba s dvoma hodnotami, pričom posledná, ktorá sa zhoduje s prvou, sa zahodí:

   Okraj: 20px 30px; V tomto prípade prvá hodnota popisuje vertikálne okraje, zatiaľ čo druhá popisuje horizontálne okraje.

3. A nakoniec, ak sú všetky hodnoty v prefabrikovanom pravidle rovnaké: margin: 20px 20px 20px 20px;

   alebo, čo je to isté (na základe odseku 2):

   Okraj: 20px 20px;

   Potom môžete použiť maximálne skrátený typ záznamu(zahodí sa posledná hodnota, ktorá sa zhoduje s prvou):

   Okraj: 20px; Čo bude znamenať rovnaký okraj na všetkých stranách nášho prvku Html.

Keď už sme pri maržiach, za zmienku stojí schéma ako napr "Zrútenie okraja" alebo inými slovami „zrútenie sa okrajov“. Stručne povedané, podstata tohto javu je nasledovná.

Ak máme dva bloky umiestnené pod sebou (zrútenie okraja sa môže vyskytnúť iba vertikálne) a oba majú opačné okraje (napríklad spodný okraj pre horný prvok a horný okraj pre spodný prvok), potom bude väčšia hodnota okraja absorbovať menšiu.

Napríklad, ak je horný blok nastavený takto:

Okraj: 20px 20px 200px 20px;

A k tomu spodnému:

Okraj: 100px 20px 20px 20px;

Potom spodný okraj horného bloku (200px) pohltí horný okraj spodného bloku (100px, a aj keď sa stane 199px, nič sa nezmení) a výsledný vonkajší okraj medzi týmito dvoma blokmi bude stále 200px. Tie. len ten väčší modulo Margin a nijako sa nesčítava s opačnou hodnotou vertikálne susediaceho prvku.

Taký je záves, ktorý funguje výhradne vertikálne a horizontálne sa protiľahlé veľkosti Marginu jednoducho pridajú. Ale to sa týka iba okrajov s rovnakým znamienkom, ale ak sú s rôznymi znamienkami, ich čísla sa jednoducho spočítajú a bloky budú od seba vzdialené o výslednú hodnotu.

Napríklad v tomto prípade:

Horný okraj: 20px 20px -20px 20px; Dolný okraj: 10px 20px 20px 20px;

Výsledná výplň medzi blokmi bude -10px, t.j. spodný bude prechádzať cez horný prvok Html o 10 pixelov.

Ďalšou vlastnosťou použitia pravidla Margin v CSS je predpísaná hodnota vertikálne pre vložené prvky sa ignoruje... Opýtaním sa:

Okraj: 20px;

Napríklad pre, čo je vložený prvok, v skutočnosti uvidíme iba vodorovnú výplň a vertikálne nenastanú žiadne zmeny.

Trochu pred seba poviem, že výplň bude fungovať pre vložené značky vertikálne, ale zvýšená výplň žiadnym spôsobom neovplyvní ich všeobecnú polohu voči ostatným susedným prvkom.

V prípade blokovej značky (nadpisy, odseky) by vertikálne rastúce odsadenie posunulo tento prvok vzhľadom na ostatné susedné bloky.

No, hranica (Border), respektíve jej šírka, tiež nebude môcť posúvať ostatné susedné bloky vertikálne preč od inline tagu. Pri líniových prvkoch je možný pohyb len jedným smerom - horizontálne a to je všetko.

Padding and border - padding and borders

Prejdime teraz k nastaveniu paddingu pomocou pravidla Padding a uvidíme, aké hodnoty môže nadobudnúť:

Ako vidíte, nie je tu žiadna zmienka o Auto a toto pravidlo CSS nepovoľuje záporné hodnoty (môžu byť iba kladné - od nuly a vyššie). Tie. Výplň nevytlačí obsah z rámu. Najviac, čo sa dá urobiť, je priblížiť obsah k rámu.

Percentá v ňom sa počítajú rovnakým spôsobom ako v Margin - vzhľadom na šírku kontajnera (oblasť obsahu nadradeného prvku), ktorý obklopuje náš prvok. Pravidlo kombinovanej výplne v Css je vytvorený a riadi sa rovnakými zákonmi, ako sú uvedené vyššie:

Výplň: 20px 10px 40px 30px;

V tomto pravidle popíšeme všetky štyri strany, začínajúc zhora. Ak v ňom potrebujete niečo zmenšiť (na tri, dve alebo dokonca jednu hodnotu), potom budete musieť použiť princípy zmenšenia pre vonkajšie zarážky opísané vyššie, ktoré budú presne s rovnakým úspechom fungovať pri vnútorných zarážkach.

A posledná vec, ktorú by som dnes chcel zvážiť, je rámec, ktorý sa používa Hranica... Majú tri typy parametrov:

1. Border-width - nastavuje šírku okraja
2. Border-color – nastavuje jeho farbu
3. Border-style - typ orámovania alebo typ čiary, ktorou sa bude kresliť

Všetky tri tieto pravidlá CSS majú platnú množinu hodnôt:

Šírka čiary pre rám ( Šírka okrajov) možno zadať pomocou čísel v Em, Ex alebo Px, alebo pomocou slov:

1. Tenká - tenká čiara;
2. Stredná - stredná (táto hodnota sa používa štandardne);
3. Hustý - hustý.

Ako hodnotu pre farbu okraja ( Farba okraja), môžete použiť akceptované metódy na ich špecifikáciu (hexadecimálny kód, slová atď.):

Farba okraja: červená;

V predvolenom nastavení, ak farba okraja nie je explicitne špecifikovaná, použije sa farba použitá pre písmo v tomto prvku.
Vlastnosť CSS Border-style vám umožňuje špecifikovať typ orámovania slovami:

1. Žiadne – bez okrajov (predvolené)
2. Bodkovaná - čiara je nakreslená bodkami
3. Prerušovaná - bodkovaná čiara
4. Plná - plná čiara
5. Dvojitý - dvojitý riadok
6. Drážka - odsadený okraj
7. Ridge - vyčnievajúci
8. Vložka a začiatok – hra s tieňom

Prirodzene, keďže každý blok má štyri strany, potom môžete použiť všeobecné pravidlá aj samostatné pravidlá pre každú zo strán:

To isté bude platiť pre prefabrikované hraničné pravidlo- dá sa písať ako pre všetky strany súčasne (Border), tak pre každú zo strán zvlášť (Border-top, left, bottom a right). Poradie hodnôt nie je dôležité:

Ohraničenie: 1px plná červená;

Ak niečo chýba, použije sa namiesto toho predvolená hodnota.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

ďalšie videá si môžete pozrieť na stránke

Možno vás bude zaujímať

Výška, šírka a pretečenie – pravidlá CSS pre popis oblasti obsahu v rozložení bloku
Pozícia (absolútna, relatívna a pevná) - spôsoby umiestnenia prvkov Html v CSS (pravidlá vľavo, vpravo, hore a dole) Rozdielny štýl pre interné a externé odkazy cez CSS
Float and clear in CSS - block layout tools
Zobrazenie (blok, žiadne, inline) v CSS – nastavte typ zobrazenia Html prvkov na web stránke

200? "200px": "" + (this.scrollHeight + 5) + "px"); ">

Vlastnosti okraja a vypchávky

Popis

Nastaví množstvo výplne z každého okraja prvku. Výplň je priestor od okraja aktuálneho prvku po vnútornú hranicu jeho nadradeného prvku (obrázok 1).

Ryža. 1. Odsadenie od ľavého okraja prvku

Ak prvok nemá nadradeného prvku, výplň bude vzdialenosť od okraja prvku k okraju okna prehliadača za predpokladu, že aj samotné okno je predvolene vyplnené. Aby ste sa ich zbavili, mali by ste nastaviť hodnotu okraja pre selektor rovná nule.

Vlastnosť margin vám umožňuje nastaviť hodnotu okraja pre všetky strany prvku naraz alebo ju definovať len pre zadané strany.

Syntax

marža: [hodnota | úrok | auto] (1,4) | dediť

Hodnoty

Je povolené použiť jednu, dve, tri alebo štyri hodnoty, pričom ich oddelíte medzerou. Účinok závisí od počtu hodnôt a je uvedený v tabuľke. 1.

Veľkosť odsadenia môže byť špecifikovaná v pixeloch (px), percentách (%) alebo iných jednotkách prijateľných pre CSS. Hodnota môže byť kladná alebo záporná.

Auto Označuje, že veľkosť zarážok bude automaticky vypočítaná prehliadačom. zdediť Zdedí hodnotu od rodiča.

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 2.

Ryža. 2. Použitie vlastnosti margin

Objektový model

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

Prehliadače

Internet Explorer 6 v režime quirk nepodporuje zarovnanie bloku na stred pomocou okraja: 0 automatické pravidlo. Aj v tomto prehliadači sa vyskytla chyba pri zdvojnásobení hodnoty ľavého alebo pravého výplne pre plávajúce prvky vnorené do nadradených prvkov. Polstrovanie, ktoré susedí s bokom rodiča, je zdvojené. Problém sa zvyčajne rieši pridaním display: inline do plávajúceho prvku.

Internet Explorer do verzie 7.0 vrátane nepodporuje zdedenú hodnotu.

Poznámka

Pre blokové prvky umiestnené vertikálne vedľa seba sa pozoruje efekt zrútenia, keď sa odsadenia nesčítajú, ale navzájom kombinujú. Samotné zrútenie pôsobí na dva alebo viac blokov (jeden môže byť vnorený do druhého) s odrážkami navrchu alebo dole, pričom susedné zarážky sa spoja do jedného. Pre ľavé a pravé zarážky sa zbalenie nikdy nepoužije.

Kolaps nefunguje:

• pre prvky, ktoré majú vlastnosť padding nastavenú na zbaliteľnej strane.
• pre prvky s ohraničením nastaveným na strane zrútenia;
• na prvkoch s absolútnym polohovaním, t.j. tie s polohou nastavenou na absolútnu;
• na plávajúcich prvkoch (pre ne je vlastnosť float nastavená na ľavú alebo pravú);
• pre inline prvky;
• pre .

Dnes budeme pracovať na pochopení rozdielu medzi výplňou HTML ( vnútorné polstrovanie) a okraj (výplň) v CSS. Najprv si však poďme zistiť ich syntax. Existuje niekoľko spôsobov, ako zapísať tieto vlastnosti: pravidelné a skrátené:

Výplň a okraj v CSS

Zvyčajný zápis pre príslušné vlastnosti je ľahšie pochopiteľný, pretože je podobný všetkým ostatným štýlovým zápisom:

Pravidelný vstup:

padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;

Na druhej strane, skrátený zápis CSS spája všetky tieto vlastnosti do jednej spoločnej vlastnosti “ vypchávka«.

Stručný záznam:

výplň: 10px 20px 40px 10px;

Výplň a okraj majú štyri hodnoty: horná, pravá, spodná a ľavá. Vyššie uvedená skratka tiež špecifikuje štyri hodnoty oddelené medzerou. Prvá zo štyroch hodnôt je horná výplň, potom pravá výplň, spodná výplň ( výplň spodného HTML) a vľavo:

vypchávka: HORE PRAVÝ DOLE vľavo; (polstrovanie: vpravo hore dole vľavo)

Tento zápis možno skrátiť na tri hodnoty, ak sú ľavé a pravé odsadenie / okraje rovnaké. Ak je napríklad horná výplň 30 pixlov, ľavá a pravá strana 10 pixlov a spodná časť 40 pixlov, môžete použiť nasledujúci zápis:

padding: 30px 10px 40px;

Znížte na dve hodnoty!

Ak je horná a dolná výplň / okraje rovnaké a pravá a ľavá výplň / okraje sú rovnaké, možno zadať iba dve hodnoty. V tomto príklade máme horný a spodný okraj 10px a ľavý a pravý okraj 20px. Náš CSS bude vyzerať takto:

výplň: HORNÁ / VPRAVO DOLE / VĽAVO; (výplň: hore / vpravo dole / vľavo) výplň: 10px 20px;

Len jeden význam!

Naša najnovšia skratka pre výplň HTML a okraj obsahuje iba jednu hodnotu. Tento záznam možno použiť, keď sú všetky odsadenia ( hore, dole, vpravo a vľavo) majú rovnaký význam. Ak by sme chceli, aby všetky strany mali 20px výplň, potom by CSS vyzeralo takto:

Kedy použiť aký formát záznamu? Ak napríklad potrebujem nastaviť elementu len spodnú výplň, použijem bežnú notáciu, keďže vlastnosť potrebujem aplikovať len na jednu stranu: padding-bottom: 30px;

Ako pracovať s PADDING a MARGIN

Medzi týmito dvoma vlastnosťami je hmatateľný rozdiel. Padding sa používa na nastavenie priestoru vo vnútri kontajnera prvku HTML. Okraj sa používa na nastavenie priestoru okolo vonkajšieho okraja prvkov.

Predstavte si vypchávky, ktoré vám navlečú zimný kabát. Kabát je vašou súčasťou, ale keby som po vás hodil farbu, pokryl by širší povrch, ako keby ste ten kabát nemali na sebe.

Výplň si môžete predstaviť aj ako výplň do kartónovej škatule. Pri plnení škatule polystyrénom držíte obsah ďalej od okrajov škatule. Padding v CSS robí to isté.

Teraz si predstavte okraj ako neviditeľné silové pole okolo vás. Silové pole pred vami chráni iné veci. Vráťme sa k príkladu kabáta a farby, ak by som na teba hodil farbu a tá by bola schopná prejsť silovým poľom, stále by zakryla len teba a tvoj kabát.

PADDING a MARGIN na príklade stránky

Pozrime sa na vlastnosti pomocou príkladov s prvkami. Začneme odsekom (tag

), potom k nej pridajte farbu pozadia a pridajte 30px výplň na každú stranu.

Nižšie vľavo môžete vidieť, že ide o odsek s výplňou 30 pixelov okolo. Na obrázku vpravo som použil nástroje Google Chrome, aby som ukázal, kde začína / končí výplň HTML pre tento prvok. Zelená farba na obrázku nižšie je výplň okolo nádoby. Vnútornú oblasť vyplňuje tmavomodrá farba pozadia:

Teraz pridajme k odseku okraj. Pridám 30px hornú a spodnú výplň a 20px ľavú a pravú výplň. Obrázok nižšie vľavo ukazuje, ako sa tento odsek zmenil od okraja. Skutočná šírka obrázka sa zmenšila, pretože okraj posúva ďalší prvok HTML od okraja. Vpravo môžete vidieť, že okraj okolo prvku je oranžový. okraj je vždy mimo vypchávky a tmavomodré pozadie nepresahuje do oblasti okraja.