Ce este umplutura? Să ne amintim pentru totdeauna: care este diferența dintre margine și umplutură. Căptușeală și chenar - căptușeală interioară și rame

18 octombrie 2017 la 15:36 Organizarea indentării în aspect (marja/padding)

CSS
HTML

Tutorial

Scopul acestui articol nu este de a complica lucruri 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ă aderați la aceasta în indentare. Ș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. Manevrarea corectă cu margine și umplutură joacă un rol foarte mare în această chestiune.

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

Principii de bază:

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

Nu se pot seta indentări pentru elemente independente (blocul BEM).

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 (cu unele 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 impinge singur.
Inițial, el este într-o poziție statică și primește un fel de impact în detrimentul altora.

Marja este setată la ultimul element posibil din casă.

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

Departe, departe, dincolo de verbal.

... ...

Nu pe cheltuiala elemente copil, iar pe cheltuiala celor vecini se face o indentare.

Î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 mult motiv simplu de care merită să rămânem acest principiu, aceasta este pentru 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.

Problemele reale pot apărea atunci când machetele cu structură slabă de indentare sunt redate dinamic sau duplicate.

Indentațiile nu pot fi setate pentru elemente independente (bloc BEM) Nu indentați niciodată elementele care pot fi utilizate 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 blocul. 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; ) Pentru ultimul element al grupului, marja este resetat la zero (întotdeauna) Să luăm ca exemplu o listă și o imagine.

Acest meniu orizontalși logo-ul (care din anumite motive este în dreapta).

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

Să luăm un alt exemplu:

... 10.10.10 ... ...

Ne interesează marja dintre știri care este setată.blog-preview__item (margin-bottom: 20px;). Ultima marjă este resetată la zero, iar indentația 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

19 răspunsuri

TL; DR: În mod implicit, folosesc o marjă peste tot, cu excepția cazului în care am un chenar sau un fundal și vreau să măresc spațiul din interiorul acelei margini vizibile.

Pentru mine cel mai mult mare diferentaîntre umplutură și margine este că marginile verticale sunt comprimate automat, dar umplutura nu este.

Luați în considerare două elemente, unul deasupra celuilalt, fiecare cu indentare 1em. Această indentare este considerată parte a elementului și este întotdeauna păstrată.

Deci veți obține conținutul primului element, urmat de umplutura primului element, apoi umplutura celui de-al doilea și apoi conținutul celui de-al doilea element.

Deci conținutul acestor două elemente va ajunge să fie 2em cu 2 elemente.

Acum înlocuiți această umplutură cu o marjă de 1 em. Marginile sunt considerate a fi în afara granițelor elementului, iar marginile elementelor adiacente se vor suprapune.

Deci, în acest exemplu, veți obține conținutul primului element, urmat de 1em din caseta combinată și apoi conținutul celui de-al doilea element. Astfel, conținutul acestor două elemente este de 1 1em unul de celălalt.

Acest lucru poate fi foarte util atunci când știți că doriți să spuneți 1em spațiu între elemente, indiferent de elementul lângă care se află.

Alte două diferențe mari sunt că umplutura este inclusă în zona de clic și culoarea de fundal/imagine, dar nu în casetă.

Cel mai bun lucru pe care l-am văzut explicându-l cu exemple, diagrame și chiar „încercați-l singur” este acesta.

Graficul de mai jos oferă instantaneu reprezentare vizuală despre diferenta.

Un lucru de reținut este că browserele compatibile cu standardele (excepția IE fac excepție) afișează doar o parte a conținutului la o lățime dată, așa că urmăriți acest lucru în calculele de aspect. De asemenea, observați că suportul Bootstrap 3 este vizibil în cadrul ferestrei.

MARJA vs PADDING:

Marja este utilizată într-un element pentru a crea distanță între acel element și alte elemente de pe pagină. Când umplutura este folosită pentru a crea distanță între conținut și marginea unui element.

Marja nu face parte din element, unde umplutura este parte a elementului.

Există mai multe explicații tehnice pentru întrebarea dvs., dar dacă sunteți în căutarea unei modalități de a vă gândi la margine și umplutură care vă va ajuta să alegeți când și cum să le utilizați, acest lucru ar putea ajuta.

Comparați elementele blocului cu imaginile agățate pe perete:

Fereastra browserului este ca un perete.
conținutul este similar cu fotografia.
marginea este ca spațiul dintre imaginile încadrate.
adaosul este ca matul în jurul fotografiei.
Chenarul este similar cu chenarul cadrului.

Când decideți asupra marginii și umpluturii, este o regulă de bază să folosiți marginea atunci când poziționați un element în raport cu alte lucruri de pe perete și de umplutură. > când ai configurat aspect elementul în sine. Marja nu va schimba dimensiunea elementului, dar umplutura va face, în general, elementul mai mare de 1 .

1 Acest model implicit de fereastră poate fi modificat folosind atributul box-sizing.

În ceea ce privește marginile, nu trebuie să vă faceți griji cu privire la lățimea elementului.

La fel ca atunci când dați ceva (padding: 10px;), trebuie să reduceți lățimea elementului cu 20px pentru a păstra „potrivirea” și a nu sparge alte elemente din jurul lui.

Așa că, de obicei, încep prin a folosi căptușeli pentru a obține totul „împachetat” și apoi folosesc marginile pentru a face mici ajustări.

Un alt lucru de care trebuie să fii conștient este că umpluturile sunt mai compatibile browsere diferite, iar IE nu tratează foarte bine marjele negative.

Iată câteva coduri HTML care demonstrează modul în care umplutura și marja afectează ratele de clic și umplerea fundalului. Obiectul primește clicuri pe umplutură, dar face clic pe zona marginii "d" a obiectului pentru a merge la obiectul părinte.

$(".outer").click(function(e) ( console.log("outer"); e.stopPropagation(); )); $(".inner").click(function(e) ( console.log("inner"); e.stopPropagation(); ));

.exterior ( umplutură: 10px; fundal: roșu; ) .intern (marginea: 10px; umplutură: 10px; fundal: albastru; chenar: alb solid 1px; )

Marginile șterg zona din jurul elementului (în afara graniței), dar umplutura șterge zona din jurul conținutului (în interiorul chenarului) elementului.

aceasta înseamnă că elementul dvs. nu știe despre limitele sale exterioare, așa că, dacă proiectați controale web dinamice, vă recomand să utilizați padding și margining dacă puteți.

Vă rugăm să rețineți că de mai multe ori trebuie să utilizați marja.

În CSS, există două moduri de a crea spațiu în jurul elementelor dvs.: margini și umplutură. În majoritatea cazurilor de utilizare, acestea sunt identice din punct de vedere funcțional, dar în realitate se comportă oarecum diferit. Există diferențe importante între margini și umplutură pe care ar trebui să le luați în considerare atunci când alegeți ce să utilizați pentru a muta elementele în jurul paginii. Cu toate acestea, în cazurile în care orice marjă sau umplutură poate fi folosită pentru același efect, multe decizii se rezumă la preferințele personale.

Doriți ca spațierea dvs. să apară în afara casetei create proprietate de frontieră. Marginile se află în afara granițelor, așa că le folosiți dacă doriți ca chenarul dvs. să rămână într-un singur loc. Acest lucru poate fi util dacă aveți de ex. bara laterală cu o margine pe care doriți să o îndepărtați de zona principală de conținut.

Nu doriți ca culoarea de fundal sau imaginea să vă invadeze spațiul personal. Culori de fundal iar imaginile se opresc la margine, așa că dacă preferați să vă păstrați fundalul în afara spațiului pe care îl faceți, marginile sunt proprietatea pe care o doriți.

Doriți să resetați spațiul din partea de sus și de jos a elementului dvs. Marginile superioare și inferioare se comportă diferit față de marginile laterale, dacă două margini sunt plasate una peste cealaltă, ele se prăbușesc la aceeași dimensiune ca și marginile laterale. set mare câmpuri. De exemplu, dacă setez un paragraf cu o marjă superioară de 20 px și o marjă inferioară de 15 px, voi avea doar 20 px de spațiu între paragrafe (cele două marje se desfășoară una peste alta, iar cele mai mari câștigă).

Când să folosiți o garnitură

Vrei ca tot spațiul pe care îl creezi să fie în limitele tale. Căptușeala se află în interiorul chenarelor dvs., așa că este utilă pentru a vă îndepărta chenarele de conținutul din interiorul elementului.

Vrei ca culoarea/imaginea de fundal să continue în spațiul creat. Fundalul tău va continua în spatele adăugării tale, așa că folosește-l numai dacă vrei aspectul fundalului tău.

Vrei ca partea de sus și de jos să se comporte mai rigid. De exemplu, dacă setați paragrafele din documentul dvs. să aibă o umplutură superioară de 20 px și o umplutură inferioară de 15 px, atunci de fiecare dată când aveți două paragrafe pe linie, acestea au de fapt total 35 de pixeli de spațiu între ele.

Diferența dintre câmp extins și explicație

Nu este practic să folosiți padding pe spațiul de conținut dintr-un element; ar trebui să utilizați marginea pe elementul copil. Browsere vechi, cum ar fi Internet Explorer, a interpretat greșit modelul ferestrei, cu excepția utilizării marginii , care funcționează bine în Internet Explorer 4.

Există două excepții de la umplutură:

Se aplică unui element inline, care nu poate conține elemente copil, cum ar fi un element de intrare.

Compensezi foarte mult eroare diferită browser pe care vânzătorul *tuse* Mozilla *tuse* refuză să-l repare și pentru a fi sigur (în măsura în care faceți schimb regulat cu editorii W3C și WHATWG) că ar trebui să aveți solutie de lucru iar această decizie nu va afecta stilul a nimic altceva decât eroarea pentru care compensați.

Când aveți un element 100% lățime cu padding: 50px; , veți obține lățime: calc(100% + 100px); . Deoarece marginea nu este adăugată la width , nu va cauza probleme neașteptate de aspect dacă utilizați margine pe elementele secundare în loc de umplutură direct pe element.

Deci, dacă nu faceți unul dintre aceste două lucruri, nu adăugați padding elementului, ci folosiți un element copil/copii pentru a asigura comportamentul așteptat în toate browserele.

Mai întâi să vedem care sunt diferențele și care este fiecare responsabilitate:

1) Marja

Proprietățile marginii CSS sunt folosite pentru a crea spațiu în jurul elementelor.
Proprietățile câmpului stabilesc dimensiunea spațiului din afara câmpului de margine. Cu CSS aveți control complet asupra câmpurilor.
Există proprietăți CSS pentru a seta marja pentru fiecare parte a elementului (sus, dreapta, jos și stânga).

2) Garnitura

Proprietățile firmware-ului CSS sunt folosite pentru a crea spațiu în jurul conținutului.
Căptușeala șterge zona din jurul conținutului (în interiorul marginii) elementului.
Cu CSS ai control deplin peste adaos. Sunt Proprietăți CSS pentru a seta umplutura pentru fiecare parte a elementului (sus, dreapta, jos și stânga).

Deci, pur și simplu, Margin este spațiul din jurul elementelor, iar Padding este spațiul din jurul conținutului care face parte din element.

Această imagine de la codemancers arată modul în care granițele și marginile devin accesibile și modul în care marginile și caseta de conținut le fac diferite.

Tutorial

Scopul acestui articol nu este de a complica lucruri 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ă aderați la aceasta în indentare. Ș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ă. Sunt folosite și în elemente decorative. Dar nu atât de categoric.

Principii de bază:

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

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

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

Departe, departe, dincolo de verbal.

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

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.

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.

Problemele reale pot apărea atunci când machetele cu structură slabă de indentare sunt redate dinamic sau duplicate.

Dacă trebuie să indentați blocul. 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).

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

Să luăm un alt exemplu:

... 10.10.10 ... ...

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

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

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

Când este mai bine să folosiți marginile în scopuri de formatare și când umplutura, ș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ă trecem la situație tipică, care este cel mai probabil familiar fiecărui dezvoltator interfata utilizatorîn 2017. Avem un șablon simplu de card.

ÎN în acest exemplu Există 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.

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.

Simbolul + reprezintă un 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 oricare cantitatea necesară 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 poate fi asta? Merită să creați un nume de clasă suplimentar .add-card pentru aceasta, care conține și o regulă cu proprietatea marjei care este clasa .card? Nu, există o soluție mai bună.

Cum arată? Î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.

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 cele testate pe propria experiență doua reguli. Deci, să folosim:

umplutură - pentru spațiile dintre recipient și conținutul acestuia.

margine - pentru spațiile dintre elementele din interiorul containerului.

Să vedem ce marja de diferenta din umplutură. Pentru a face acest lucru, să ne amintim încă o dată modelul bloc în CSS.

MARGIN (Marja) este distanța de la marginea (cadrul) blocului, până la cele mai apropiate elemente sau, dacă nu există, până la marginile documentului.

PADDING (Indentări) - ca o distanță internă între chenar (cadru) și conținutul blocului.

Exemplu: Să creăm trei stiluri pentru trei paragrafe diferite, cu valori de marjă și de completare diferite și să ne uităm la rezultat:

Aceste. valorile sunt scrise în sensul acelor de ceasornic: sus, dreapta, jos, stânga.

În ce cazuri este mai bine să folosiți indentarea și în ce cazuri este mai bine să folosiți marginile?

Câteva diferențe cheie:

Indentațiile (padding) sunt situate în interiorul blocului, iar marginile (marja) sunt situate în afara acestora;

Fundalul blocului și imaginea de fundal se aplică numai pentru umplutură, nu pentru margini. Marginile sunt întotdeauna transparente, permițând să se arate fundalul elementului părinte.

În mod implicit, înălțimea și lățimea blocurilor sunt determinate automat, adică. cu cât mai mult text (sau alt conținut), cu atât blocul este mai larg și mai înalt.

Dar, folosind tehnologia CSS, putem seta lățimea și înălțimea blocurilor de care avem nevoie.

HEIGHT – proprietate care stabilește înălțimea blocului;

WIDTH – proprietate care stabilește lățimea blocului;

De obicei, elementele DIV sunt folosite ca blocuri în CSS. Cu toate acestea, proprietățile de lățime și înălțime pot fi aplicate și la paragrafe, liste etc.

Să creăm 4 clase și să le atribuim una câte una aceleiași casete (în în acest caz, DIV ) cu text.

Acum, înălțimea este fixă, iar lățimea este întinsă pentru a se potrivi conținutului.

.box3 ( lățime: 300px; înălțime: 600px; chenar: 1px roșu continuu; fundal: #FFE446; )

Aici atât înălțimea, cât și lățimea sunt fixe.

.box4 ( lățime: 300px; înălțime: 300px; chenar: 1px roșu continuu; fundal: #FFE446; )

Și acesta este un exemplu despre cum va arăta o cutie cu lățime și înălțime fixă dacă conținutul nu se potrivește. Textul trece pur și simplu dincolo de bloc.

Nota!

Astfel, prin specificarea lățimii unui bloc, specificați lățimea doar a acelei părți a blocului care este rezervată pentru conținut.