În timp ce rătăceam pe forumuri am dat de faptul că încă se pune întrebarea, ce face umplutura, Si ce marginea, și care sunt diferențele dintre ele. De aceea am decis să vă reamintesc acest lucru. Deci, fără a recurge la fraze abstruse, să punem problema și să privim un exemplu în care totul va deveni clar.

Sarcină: Pe pagină Am nevoie de un bloc roșu(200x200 pixeli), care se retrage de la marginile browserului sus și stânga cu 40 și, respectiv, 70 de pixeli și textul din interiorul căruia este indentat în stânga și în sus cu 40 de pixeli.

Soluţie: uita-te la poza si codul. Blocul nostru roșu nu trebuie să depășească 200 pe 200 de pixeli și ar trebui să fie indentat de la marginile browserului (sau a altor blocuri de conținut). De fapt, facem aceste indentări prin margine. Dacă facem umplutură, atunci indentarea are loc în interiorul blocului nostru roșu și indentarea se obține cu fundalul blocului în sine (adică roșu).

Pe lângă proprietățile utilizate (liniile 6-9), există și proprietăți margin-right, padding-right, margin-bottom, padding-bottom - sunt pentru indentare în dreapta și, respectiv, în jos. Valorile pentru toate aceste proprietăți pot fi în pixeli (px), procente (%) sau unități em.

În principiu, atât. Cu toate acestea, există încă câteva caracteristici de lucru cu ei.

Caracteristici de margine și de umplutură

Când se utilizează căptușeală, dimensiunile căptușelii trebuie scăzute din înălțimea și lățimea blocului, altfel dimensiunea blocului va crește cu dimensiunea căptușelii.

Dacă unui bloc i se dau valori de margine-stânga și margine-dreapta ale auto, atunci dacă blocul are o lățime fixă ​​(de exemplu, 400px) și nu are o proprietate CSS float, atunci acest bloc va fi aliniat la centru a elementului în care se află. De fapt, pentru aspectul fără cauciuc cu aliniere la centru, această metodă de aliniere este de obicei utilizată. În ciuda faptului că IE 5.5 și versiunile anterioare nu acceptă valoarea automată, acest lucru nu vă împiedică să o utilizați tot timpul =).

Nu este recomandabil să folosiți padding și margin în tabele deoarece efectul va fi imprevizibil în diferite browsere.

Și ultimul lucru pe care am vrut să-l spun. Nu uitați să utilizați constructe de notație scurtă, cum ar fi margin: 10px 0 5px 20px;. Dacă indentarea este zero, atunci puteți pune pur și simplu un zero, fără a specifica parametrii. Este foarte ușor să ne amintim care dintre parametri se referă la ce limită - pentru un bloc, indentațiile merg în sensul acelor de ceasornic: primul număr este deasupra, al doilea este în dreapta, al treilea este în jos, al patrulea este în partea de jos. stânga.

De fapt, asta este tot ce am vrut să vă spun astăzi. Weekend fericit tuturor!

Astăzi vom lucra la înțelegerea diferenței dintre padding HTML ( umplutura) și marginea (marja) în CSS. Dar mai întâi, să înțelegem sintaxa lor. Există mai multe moduri de a scrie aceste proprietăți: obișnuit și scurt:

Padding și Margin în CSS

Forma obișnuită de notație pentru proprietățile în cauză este mai ușor de înțeles, deoarece este similară cu toate celelalte notații de stil:

Intrare regulată:

padding-top: 10px; padding-dreapta: 20px; padding-bot: 10px; padding-stânga: 20px;

Pe de altă parte, prescurtarea CSS combină toate aceste proprietăți într-o singură proprietate comună " umplutura«.

Scurtă intrare:

umplutură: 10px 20px 40px 10px;

Umplutura și marginea au patru valori: sus, dreapta, jos și stânga. Notația scurtă prezentată mai sus specifică și patru valori, separate printr-un spațiu. Prima dintre cele patru valori este liniuța de sus, apoi liniuța din dreapta, de jos ( umplutură HTML de jos) și în stânga:

căptușeală: SUS DREAPTA JOS STÂNGA; (umplutură: sus dreapta jos stânga)

Această intrare poate fi redusă la trei valori dacă umplutura/marja din stânga și din dreapta sunt aceleași. De exemplu, dacă marginea de sus este de 30 px, stânga și dreapta sunt 10 px, iar partea de jos este de 40 px, atunci puteți utiliza următoarea notație:

umplutură: 30px 10px 40px;

O reducem la două valori!

Dacă umplutura/marja de sus și de jos sunt aceleași, iar umplutura/marja din dreapta și din stânga sunt, de asemenea, aceleași, atunci pot fi specificate doar două valori. În acest exemplu, avem o umplutură de sus și de jos de 10 px și o umplutură la stânga și la dreapta de 20 px. CSS-ul nostru va arăta astfel:

căptușeală: SUS/JOS DREAPTA/STÂNGA; (padding: sus/jos dreapta/stânga) padding: 10px 20px;

Un singur sens!

Cea mai recentă versiune a scurtăturii HTML pentru umplutură și marjă conține o singură valoare. Această notație poate fi folosită atunci când toate indentările ( sus, jos, dreapta și stânga) au același sens. Dacă am dori ca toate părțile să aibă padding de 20px, CSS-ul ar arăta astfel:

Când să folosiți ce format de înregistrare? De exemplu, dacă vreau să dau unui element doar o umplutură de jos, voi folosi notația obișnuită, deoarece trebuie să aplic proprietatea doar pe o parte: padding-bottom: 30px ;

Cum să lucrați cu PADDING și MARGIN

Există o diferență notabilă între aceste două proprietăți. Umplutura este folosită pentru a defini spațiul în containerul unui element HTML. Marja este folosită pentru a defini spațiul din jurul marginii exterioare a elementelor.

Imaginează-ți căptușeala îți pune o haină de iarnă. Haina face parte din tine, dar dacă aș arunca cu vopsea în tine, ar acoperi o zonă mai largă decât dacă nu ai purta acel palton.

De asemenea, vă puteți gândi la căptușeală ca la umplutura într-o cutie de carton. Când umpleți o cutie cu spumă, o folosiți pentru a ține conținutul departe de marginile cutiei. Umplutura în CSS face același lucru.

Acum gândește-te la margine ca la un câmp de forță invizibil în jurul tău. Câmpul de forță ține alte lucruri departe de tine. Revenind la exemplul de haină și vopsea, dacă ar fi să arunc vopsea în tine și ar putea trece prin câmpul de forță, atunci tot te-ar acoperi doar pe tine și pe haina ta.

PADDING și MARGIN pe exemplul unui site

Să ne uităm la proprietăți folosind exemple cu elemente. Vom începe cu un paragraf (tag

), apoi adăugați o culoare de fundal și adăugați o umplutură de 30 px pe fiecare parte.

Mai jos, în stânga, puteți vedea că este un paragraf cu umplutură de 30px în jurul lui. În imaginea din dreapta, am folosit instrumentele Google Chrome pentru a arăta unde începe/se termină completarea HTML pentru acest element. Culoarea verde din imaginea de mai jos este căptușeala care este plasată în jurul recipientului. Culoarea de fundal albastru închis umple zona interioară:

Acum să adăugăm o marjă la paragraf. Voi adăuga căptușeală de 30 de pixeli de sus și de jos, precum și de 20 de pixeli la stânga și la dreapta. Imaginea de mai jos din stânga arată cum s-a schimbat acest paragraf de la margine. Lățimea reală a imaginii este mai mică, deoarece marginea împinge un alt element HTML departe de chenar. În dreapta puteți vedea că culoarea portocalie este marginea din jurul elementului. marginea este întotdeauna în afara căptușelii, iar fundalul albastru închis nu se extinde în zona marginii:

Dacă încă sunteți confuz cu privire la modul de utilizare a padding-ului și a marginilor HTML, atunci este timpul să experimentați! Cu cât folosiți mai mult proprietățile CSS și modificați valorile acestora, cu atât veți înțelege mai bine cum funcționează.

Traducerea articolului „ CSS PADDING VS. MARJA SI CUM SE UTILICE” a fost pregătit de echipa prietenoasă de proiect.

Rău Bun

Sursă: Marja sau umplutura?
Philip Sporrer.
Traducere: vl49.

Când este mai bine să folosiți marginile și când să folosiți umplutura în scopuri de formatare și are vreo diferență?

M-am chinuit foarte mult timp în căutarea unor răspunsuri potrivite. Abia după ce am scris o mulțime de cod CSS teribil, indescifrabil, însoțit de diverse efecte secundare, am putut spune cu încredere că am găsit regulile fundamentale de fier cu privire la problemele enumerate mai sus.

Pentru claritate, să ne uităm la o situație tipică care este cel mai probabil familiară fiecărui dezvoltator de interfețe cu utilizatorul în 2017. Avem un șablon simplu de card.

În acest exemplu, se pot distinge două tipuri de intervale:

între cărți (albastru);

între cărți și containerul acestora (verde);

Este foarte important să înțelegem aici că avem de-a face cu două concepte diferite care nu ar trebui să fie interconectate atunci când sunt asamblate. Adică, dacă trebuie să schimb distanța dintre carduri și containerul lor, de exemplu, la 24 de pixeli, atunci acest lucru nu ar trebui să afecteze în niciun fel distanța dintre carduri în sine.

Implementarea exemplului folosind CSS?

Există literalmente mii de moduri de a crea un șablon ca acesta folosind margini și umplutură, dar aș dori să prezint unul care demonstrează utilizarea corectă a proprietăților de marjă și de umplutură. Mai mult, această metodă vă permite să adăugați și alte carduri în viitor.

Container (
umplutură: 16px;
}
.card + .card (
marjă: 0 0 0 8px;
}

Doar 2 selectoare și 2 reguli.

Ce funcție îndeplinește semnul plus?

Simbol + reprezintă selector adiacent. Indică numai elementul care urmează imediat elementul specificat înaintea acestui selector.

După cum se poate vedea din imaginea de mai sus, în cazul nostru, acest selector va selecta fiecare card care este precedat de orice alt card. Deci, folosind selectorul adiacent, putem seta marginea din stânga pentru fiecare carte, cu excepția primei.

Aceasta înseamnă că avem posibilitatea de a adăuga orice număr necesar de carduri, distanța dintre care va fi întotdeauna de opt pixeli.

Totul funcționează bine până când trebuie să plasăm altceva decât un card lângă cărți. Ei bine, să spunem un buton „Adaugă card” („Adaugă card”):

Judecând după fragmentul de cod CSS existent, cel mai probabil nu am atribui clasa .card noului element care reprezintă butonul, deoarece nu este un card. Cum să fii? Merită să creați un nume de clasă suplimentar .add-card pentru aceasta, care conține aceeași regulă cu proprietatea margine ca și clasa .card? Nu, există o soluție mai bună.

Bufniță lobotomizată *+* .

Cu ce ​​seamănă? În ciuda asocierii amuzante, această metodă funcționează excelent și o folosesc constant de când am aflat de existența ei. Deci despre ce este vorba? Iată o privire asupra codului CSS corespunzător:

Container (
umplutură: 16px;
}
/* bine, ai recunoscut bufnița lobotomizată? 😜 */
.container > * + * (
marjă: 0 0 0 8px;
}

După cum vă amintiți, selectorul anterior se aplica oricărui card precedat de un alt card. Acum, cu ajutorul lui, putem formata fiecare element imediat înaintea căruia este orice alt element, inclusiv butonul, desigur.

În cele din urmă.

Sper din tot sufletul că materialul prezentat aici v-a ajutat să înțelegeți când să folosiți umplutura și când să folosiți marginile pentru a separa conținutul într-un container.

În consecință, aș dori să vă prezint un proiect-pen care demonstrează exemplele de mai sus, precum și două reguli testate din propria mea experiență. Deci, să folosim:

umplutura- pentru spatiile dintre recipient si continutul acestuia.

marginea— pentru spațiile dintre elementele din interiorul containerului.

Bună ziua, dragi cititori ai site-ului blogului. Astăzi vreau să continui subiectul de studiu și să iau în considerare acele reguli de stil care vă permit să setați indentări și chenare pentru elementele HTML: chenar, margine și padding.

Înainte de aceasta, am reușit să studiem proprietăți destul de simple care controlau fonturile (), textul () și ne-am uitat la model

Da, am reușit să luăm în considerare și principiile de utilizare în detaliu (extinzându-ne pe mai multe articole). Acum este timpul să trecem la regulile care stau la baza construirii documentelor (pagini web) și vom începe cu modelul bloc (relația elementelor HTML).

În termeni generali, am scris deja despre tehnologia modernă, dar astăzi vom avea specific pur. Dacă doriți să citiți publicațiile anterioare pe această temă, sunteți binevenit la .

Model de casetă în CSS - padding, margin și chenar

În al treilea rând, dobânda poate fi folosită. Din ce se numără? Se pare că de la lățimea containerului(adică din zona de conținut a elementului părinte). Mai mult, acest lucru se aplică nu numai la margine-dreapta și stânga, ceea ce ar fi logic, ci și pentru margine-sus și jos, procentele vor fi calculate exact din lățimea (și nu înălțimea) containerului.

Trebuie remarcat, vorbind despre stabilirea valorilor dimensionale, acea Marja poate fi, de asemenea, negativ. Acestea. la specificarea unei valori pozitive pentru marginea exterioară, mutăm elementul adiacent la distanța specificată, iar dacă specificăm o valoare negativă, blocul vecin se va suprapune pur și simplu pe cel pentru care am stabilit această indentație negativă. Și acest lucru este folosit foarte des în CSS.

Ei bine, este de la sine înțeles că există o regulă CSS Margin prefabricată, care în multe cazuri vă permite să reduceți dimensiunea codului folosit pentru a seta marjele externe necesare. Ordinea valorilor din ea este strict reglementată (sunt scrise printr-un caracter spațiu) și trebuie să corespundă exemplului:

Acestea. enumerarea începe de sus și continuă în sensul acelor de ceasornic până când cercul este completat cu indentarea din dreapta (dreapta). Ar putea arăta cam așa:

Marja: 20px 10px 40px 30px;

Și asta va însemna că browserul de deasupra blocului nostru ar trebui să indenteze 20 de pixeli, în dreapta - 10, sub - 40 și în stânga - 30. Adică. această intrare ar fi echivalentă cu:

Reducerea codului CSS este vizibilă cu ochiul liber. Dar aceasta nu este limita. Este destul de acceptabil să folosiți nu numai patru, ci și trei, două și chiar o singură valoare într-o regulă prefabricată. Ceea ce va ajuta și mai mult la reducerea dimensiunii codului. Cu toate acestea, va fi posibil să se reducă numărul de valori numai în anumite cazuri:

1. Dacă marginile din stânga și din dreapta sunt aceleași, de exemplu, astfel: margin:20px 30px 40px 30px;

   Acesta din urmă poate fi omis:

   Marja: 20px 30px 40px;

   Aceste două intrări de reguli prefabricate fac același lucru. Prin urmare, dacă vedeți o intrare cu trei valori în Marjă, atunci valoarea celei de-a patra (în dreapta) poate fi văzută în a doua (în stânga).

   Dacă liniuțele de mai sus și de dedesubt sunt egale, un astfel de truc nu va mai funcționa, deoarece în mod logic este posibil să se reducă structura intrării unei reguli prefabricate, doar tăind valorile duplicate de la capătul său(și valoarea liniuței de jos va fi penultima).

2. Dacă, pe lângă egalitatea marjelor externe din stânga și dreapta, există egalitatea valorilor lor în partea de sus și de jos: margin:20px 30px 20px 30px;

   sau, ceea ce este același (datorită punctului 1):

   Marja: 20px 30px 20px;

   Atunci o astfel de regulă prefabricată poate fi scrisă cu doar două valori, eliminând ultima, care coincide cu prima:

   Marja: 20px 30px; În acest caz, prima valoare descrie marginile externe pe verticală, iar a doua - pe orizontală.

3. Și, în sfârșit, dacă toate valorile din regula prefabricate sunt aceleași: margin:20px 20px 20px 20px;

   sau, care este același (datorită punctului 2):

   Marja: 20px 20px;

   Asta poate fi folosit tip de înregistrare abreviat maxim(eliminând ultima valoare care se potrivește cu prima):

   Marja: 20px; Ceea ce va însemna aceeași marjă pe toate părțile elementului nostru HTML.

Vorbind despre marjele externe, merită menționată o astfel de schemă ca „Marja-colapsare” sau, cu alte cuvinte, „colapsul marjei”. Pe scurt, esența acestui fenomen este următoarea.

Dacă avem două blocuri situate unul sub celălalt (restrângerea marginilor poate avea loc numai pe verticală) și ambelor li se oferă marje opuse (de exemplu, partea de jos pentru elementul superior și marginea de sus pentru partea de jos), atunci valoarea Marginului mai mare va absorbi cel mai mic.

De exemplu, dacă blocul de sus este setat la:

Marja: 20px 20px 200px 20px;

Și pentru cel de jos:

Marja: 100px 20px 20px 20px;

Apoi, marginea inferioară a blocului superior (200px) va absorbi marginea superioară a celui inferior (100px, și chiar dacă devine egală cu 199px, nimic nu se va schimba), iar marja externă rezultată între aceste două blocuri va fi în continuare egală cu 200px. Acestea. se ia in calcul doar cel mai mare modulo Margin și nu se adună în niciun fel cu valoarea contorului elementului adiacent vertical.

Aceasta este o captură care funcționează exclusiv pe verticală și pe orizontală, dimensiunile de marjă opuse vor fi pur și simplu adăugate una la alta. Dar acest lucru se aplică doar marjelor cu același semn, dar dacă sunt cu semne diferite, atunci numerele lor se vor aduna pur și simplu și blocurile vor fi separate unul de celălalt prin valoarea rezultată.

De exemplu, în acest caz:

Marja de sus: 20px 20px -20px 20px; Marja inferioară: 10px 20px 20px 20px;

Marja rezultată între blocuri va fi -10px, adică. cel de jos va suprapune elementul HTML de sus cu 10px.

O altă caracteristică a utilizării regulii Margin în CSS este că valoarea specificată verticala pentru elementele inline este ignorată. Întrebând:

Marja: 20px;

De exemplu, pentru , care este un element inline, vom vedea de fapt doar umplutură orizontală și nu se vor produce modificări pe verticală.

Privind puțin în viitor, voi spune că Umplutura verticală pentru etichetele inline va funcționa, dar căptușeala internă crescută nu va afecta în niciun fel poziția sa generală față de alte elemente învecinate.

În cazul unei etichete de bloc (titluri, paragrafe), creșterea Padding vertical ar muta acest element în raport cu alte blocuri adiacente.

Ei bine, cadrul (Border), sau mai degrabă lățimea sa, nu va putea, de asemenea, să mute alte blocuri adiacente vertical departe de eticheta de linie. Pentru elementele inline, mișcarea este posibilă doar într-o direcție - orizontal și atât.

Căptușeală și chenar - căptușeală interioară și rame

Să trecem acum la setarea umpluturii folosind regula Padding și să vedem exact ce valori poate lua:

După cum puteți vedea, nu există nicio mențiune despre Auto aici, iar această regulă CSS nu permite utilizarea valorilor negative (acestea pot fi doar pozitive - de la zero și mai sus). Acestea. Nu există nicio modalitate de a împinge conținutul dincolo de cadru folosind Padding. Maximul care se poate face este să aduci conținutul foarte aproape de cadru.

Procentele din acesta sunt calculate în același mod ca în Margin - în raport cu lățimea containerului (zona de conținut a elementului părinte) în care este închis elementul nostru. Regulă de umplutură compusă în Css este format și respectă aceleași legi ca cele discutate mai sus:

Umplutură: 20px 10px 40px 30px;

În această regulă, pornind de sus, descriem toate cele patru laturi. Dacă trebuie să reduceți ceva în el (la trei, două sau chiar o valoare), atunci va trebui să utilizați principiile de reducere descrise mai sus pentru indentările externe, care vor funcționa cu exact același succes pentru cele interne.

Și ultimul lucru pe care azi aș dori să-l iau în considerare este cadrul care este setat folosind Frontieră. Au trei tipuri de parametri:

1. Border-width — setează grosimea chenarului
2. Border-color — își stabilește culoarea
3. Border-style - tipul de cadru sau tipul de linie cu care va fi desenat

Toate aceste trei reguli CSS au un set valid de valori:

Lățimea liniei pentru cadru ( Lățimea graniței) poate fi specificat fie folosind numere în Em, Ex sau Px, fie în cuvinte:

1. Subțire - linie subțire;
2. Mediu - medie (această valoare este utilizată implicit);
3. Gros - gros.

lățime margine: 2px;

Ca valoare pentru culoarea cadrului ( Chenar-culoare) puteți folosi metodele acceptate pentru specificarea lor (cod hexazecimal, cuvinte etc.):

Culoare chenar: roșu;

În mod implicit, dacă culoarea chenarului nu este specificată în mod explicit, va fi folosită cea folosită pentru fontul din interiorul elementului.
Proprietatea CSS în stil Border vă permite să specificați tipul de chenar în cuvinte:

1. Niciunul - fără cadru (implicit)
2. Punctată - linia este trasată cu puncte
3. întreruptă - linie punctată
4. Solid - linie continuă
5. Linie dublă - dublă
6. Groove - cadru deprimat
7. Creasta - proeminentă
8. Inset și start - jocuri cu umbre

Desigur, deoarece există patru laturi pentru orice bloc, puteți folosi atât reguli generale, cât și unele separate pentru fiecare parte:

Același lucru se va aplica și în cazul reguli de frontieră prefabricate— poate fi specificat atât pentru toate părțile simultan (Border), cât și pentru fiecare parte separat (Border-sus, stânga, jos și dreapta). Ordinea valorilor nu este importantă:

Chenar: 1px roșu continuu;

Dacă omiteți ceva, va fi folosită în schimb valoarea implicită.

Multă baftă! Ne vedem curând pe paginile site-ului blogului

Puteți viziona mai multe videoclipuri accesând

");">

S-ar putea să fiți interesat

Înălțime, lățime și depășire - reguli CSS pentru descrierea zonei de conținut în aspectul bloc
Poziție (absolută, relativă și fixă) - moduri de a poziționa elementele HTML în CSS (reguli stânga, dreapta, sus și jos) Stil diferit pentru link-urile interne și externe prin CSS
Float și clar în CSS - instrumente de aspect bloc
Afișare (block, none, inline) în CSS - setați tipul de afișare a elementelor HTML pe pagina web

18 octombrie 2017 la 15:36

Organizarea indentărilor în aspect (marja/padding)

• CSS
• HTML

• Tutorial

Scopul acestui articol nu este de a complica lucrurile simple, ci de a concentra atenția asupra standardelor binecunoscute care sunt cumva uitate. Este important să mențineți o structură semnificativă în toate aspectele aspectului dvs. și este la fel de important să respectați ea în spațiul dvs. Și unul dintre principiile principale ale aspectului este flexibilitatea. Și anume, capacitatea de a face cu ușurință orice modificări fără a rupe nimic. Manipularea corectă a marginilor și a umpluturii joacă un rol foarte important în această problemă.

Următoarele principii sunt implementate în mediul de poziționare a elementelor pe pagină. De asemenea, sunt folosite în elemente decorative. Dar nu atât de categoric.

Principii de baza:

1. Indentația este dată ultimului element posibil din casă.
2. Nu se pot seta indentări pentru elemente independente (blocul BEM).
3. Pentru ultimul element al grupului, indentarea este resetată la zero (întotdeauna).

Indentările merg de la elementul anterior la următorul.

marjele sunt setate de la elementul anterior la următorul, de la primul la al doilea, de sus în jos, de la stânga la dreapta.

Aceasta înseamnă că proprietăți precum margin-left și margin-top nu sunt utilizate(nu fără excepții). Cu căptușeală, totul este puțin opus (cu excepția faptului că este folosit în scopuri decorative, creșterea zonei de legătură etc.). Când un bloc are nevoie de umplutură în partea de sus sau în stânga, îl primește de la padding-top și padding-left ale părintelui.

Crestaturile merg in directia curgerii casei in copac, blocul nu se împinge singur.
Inițial, el este într-o poziție statică și primește un fel de impact în detrimentul altora.

Indentația este dată ultimului element posibil din casă

marjele sunt stabilite numai între elementele adiacente ale casei în copac.

În exemplu sunt 3 liste, în următoarea structură:

Indentarea se face nu în detrimentul elementelor copil, ci în detrimentul celor vecine.

În această situație, .main-section__item este ultimul posibil care poate fi indentat pentru a separa listele. Același efect poate fi obținut prin indentarea unui div, a unei liste, a unei linii sau a unui link, dar acest lucru nu va fi corect.

Acest exemplu este destul de simplu. Dar dacă vă imaginați un cuib mult mai mare, în care cineva presărat cu liniuțe, când unele margini se prăbușesc. iar unele sunt adăugate la căptușeli.

titlu într-o secțiune de șapte cuvinte

Dacă luăm exemplul unui titlu și trebuie să indentați titlul în partea de sus. apoi ultimul element va fi secțiune și padding-top este setat pentru acesta, marginile care sunt implicite trebuie întotdeauna resetate.

Cel mai simplu motiv pentru care ar trebui să aderați la acest principiu este acela de a facilita găsirea indentării în viitor, fie pentru dvs., fie pentru cineva care va lucra cu aspectul dvs. în viitor. Este vorba despre comoditate.

Adevăratele probleme pot apărea atunci când aspectul cu o structură slabă de indentare este redat dinamic sau duplicat.

Indentațiile nu pot fi setate pentru elemente independente (bloc BEM)

Nu indentați niciodată elementele care pot fi folosite de mai multe ori. Chiar dacă nu urmezi metodologiile, păstrează lucrurile în perspectivă. Există ambalaje pentru asta. Ambalajele sunt bune. Sau cursuri suplimentare.

Dacă trebuie să indentați un bloc. Fără a prejudicia, acest lucru se face folosind:

• Moștenirea prin element (dacă trageți acest bloc din element, nu va exista indentație și îl puteți plasa pur și simplu în alt loc).
• Adăugarea unei clase (puteți face din bloc un element).
• Wrapper (ca un bloc care are rol, doar in pozitionare).

.block__item > .block ( margin-right: 10px; ) .block.block__item ( margin-right: 10px; ) .block-wrap > .block ( margin-right: 10px; )

Ultimul element al grupului are indentarea resetată la zero (întotdeauna)

Să luăm ca exemplu o listă și o imagine.

Acesta este un meniu orizontal și un logo (care din anumite motive se află în partea dreaptă).

Pentru ultimul li, indentarea este resetata la zero. Și indentarea este făcută între elementele adiacente ul și img. Ce s-a discutat în al doilea principiu.

Să luăm un alt exemplu:

Ne interesează marja dintre știri care este setată.blog-preview__item ( margin-bottom: 20px; ) . Ultima marjă este resetată la zero, iar indentarea de jos este realizată prin completarea blog-preview . Ce s-a discutat în al doilea principiu.

Mai des decât alte pseudo-clase, ar trebui să utilizați:last-child.

Item:not(:last-child) ( margin-bottom: 20px; ) // sau // .item ( // alte stiluri // margin-bottom: 20px; &: last-child ( margin-bottom: 0; ) ) // sau margin-top, ideea principală aici nu este în direcția marginii, ci în absența excesului // .item + .item ( margin-top: 20px; ) // sau // .item ( / / alte stiluri // & + & ( margin-top: 20px; ) )

Excepții

Desigur, există cazuri speciale, sarcini non-triviale și nuanțe în care este imposibil să adere la aceste principii, dar în rest, merită să te străduiești pentru indentări ideale pentru a face aspectul cât mai curat posibil.

P.S. Vă sfătuiesc să citiți publicația