Diferența de marjă de umplutură Css. Proprietățile PADDING și MARGIN și modul de utilizare a acestora. Model de casetă în CSS - padding, margin și chenar

În timp ce mă plimbam pe forumuri, am dat de faptul că încă se pune întrebarea ce face padding-ul și ce face 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: uită-te la imagine și la cod. 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).

.bloc(
latime: 160px;
inaltime: 160px;
culoare de fundal: roșu;
margine-sus: 40px;
margine-stânga: 70px;
padding-top: 40px;
padding-stânga: 40px;
}

text, text, mult text, mult text text

Pe lângă proprietățile utilizate (liniile 6-9), există și proprietățile marjei-right, padding-right, margin-bottom, padding-bottom - sunt pentru umplutură în dreapta, 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!

Să vedem diferența dintre margine și 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:

Acestea. 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:

Indentaturile (padding) sunt situate in interiorul blocului, iar marginile (marja) sunt situate in 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.

14. Înălțimea și lățimea blocurilor

Î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.

Notă!

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.

De la autor: Când am început să învăț CSS, am continuat să mă confuz în ceea ce privește marginea și umplutura. Păreau foarte asemănătoare și, în unele cazuri, au dat același rezultat. În acest tutorial, veți vedea diferența dintre marginea CSS și umplutură și modul în care aceste proprietăți afectează spațiul dintre elementele din pagină. De asemenea, vom discuta despre restrângerea marjelor și utilizarea diferitelor unități de măsură atunci când creăm site-uri web receptive. Vom încheia articolul cu câteva sfaturi despre aspectul folosind marginea și umplutura.

Model bloc

Elementele din CSS sunt reprezentate ca casete dreptunghiulare. Mărimea unui bloc dreptunghiular este determinată de proprietățile elementului: conținut, umplutură, cadru, marjă.

Zona de conținut a elementului este situată în mijloc. Apoi, umplutura înconjoară zona de conținut. Cadrul înconjoară căptușeala, iar marginea este stratul exterior, adică. este în afara elementului. Pentru a înțelege mai bine ce despre care vorbim, este prezentată diagrama de mai jos.

După cum puteți vedea din diagramă, umplutura este un strat care extinde un element de la marginea exterioară a zonei de conținut până la marginea interioară a cadrului. Această proprietate controlează distanța dintre chenarul elementului și conținutul acestuia. Umplutura afectează dimensiunea unui element dintr-o pagină, dar nu are niciun efect asupra distanței dintre elementele unei pagini.

Dacă trebuie să măriți sau să micșorați distanța dintre elemente, utilizați marginea. Proprietatea marjă nu afectează în niciun fel dimensiunea elementului.

Este important de reținut că dimensiunile tuturor blocurilor de pe o pagină web depind de modelul de bloc utilizat. Există două modele de bloc: model de bloc W3C, model de bloc tradițional.

Conform modelului de bloc W3C, lățimea unui element este calculată din conținutul blocului fără a lua în considerare umplutura și marja. Suplimentarul și chenarul sunt adăugate peste dimensiunile date, ceea ce poate avea efecte imprevizibile asupra aspectului paginii.

De exemplu, să luăm un bloc cu o lățime de 200px și o înălțime de 200px, padding de 10px pe toate părțile și un chenar de 2px pe toate părțile. Browserul nu vede blocul de 200px. Browserul calculează spațiul orizontal necesar pentru afișarea blocului și este de 224 pixeli: 200(lățime)+2(chenar stânga)+10(padding stânga)+10(padding dreapta)+2(chenar drept)=224px. Deoarece acesta este un pătrat, înălțimea va fi, de asemenea, de 224 px.

Pe de altă parte, modelul tradițional de bloc ia lățimea ca sumă de conținut, umplutură și chenar. Aceasta înseamnă că, dacă blocul tău are 200 px lățime, browserul va calcula spațiul orizontal necesar pentru a-l afișa și va fi de 200 px, incluzând umplutură și chenar. Rezultatul este mai previzibil și mai ușor de lucrat.

În mod implicit, toate browserele folosesc modelul bloc W3C. Modelul poate fi setat manual folosind proprietatea box-sizing. Sunt acceptate două valori: content-box (W3C) și border-box (model tradițional). Modelul tradițional este mai intuitiv, ceea ce l-a făcut cel mai popular printre dezvoltatorii web.

Mai jos este cum să utilizați dimensionarea casetei pentru a utiliza modelul tradițional în proiectul dvs.:

html ( dimensionarea casetei: border-box; ) *, *:înainte, *:după ( dimensionarea casetei: moștenire; )

html (

dimensionare cutie : chenar - cutie ;

* , * : înainte după (

dimensionare cutie : mostenire ;

Dacă vă amintiți lucrurile mai repede când le faceți singur, încercați să experimentați cu acest demo interactiv distractiv de la Guy Routledge.

Setarea marginii și umplutura

Puteți utiliza proprietățile padding-top, padding-right, padding-bottom și padding-left pentru a controla umplutura pe toate cele patru laturi ale unui element. Umplutura poate fi specificată și printr-o proprietate de scurtătură. Dacă este scrisă o singură valoare de umplutură, CSS o folosește pentru a determina umplutura pentru toate cele 4 părți:

/* toate cele 4 laturi */ padding: 10px;

Dacă sunt prezentate 3 valori, prima este responsabilă pentru partea de sus, a doua pentru stânga și dreapta și a treia pentru partea de jos:

/* sus | orizontal | jos */ umplutură: 1em 20px 2em;

Dacă sunt prezentate toate cele 4 valori, atunci fiecare este responsabilă de sus, dreapta, jos și, respectiv, stânga:

/* sus | dreapta | jos | stânga */ padding: 10px 10% 2em 15%;

În demonstrația de mai jos, fundalul portocaliu este zona de conținut pentru diferite elemente, zona albă dintre cadru și conținut este umplutură:

Marja externă, precum umplutura, poate fi controlată pe toate cele 4 laturi folosind proprietățile margine-sus, margine-dreapta, margine-jos și margine-stânga. De asemenea, puteți seta marja pentru toate cele 4 părți simultan folosind proprietatea scurtătură.

/* toate cele 4 laturi */ margine: 10px; /* vertical | orizontală */ margine: 2em 4em; /* sus | orizontal | jos */ margine: 2em auto 2em; /* sus | dreapta | jos | stânga */ marjă: 10px 10% 2em 15%;

Lucruri de reținut Utilizați unitățile de măsură corecte

Când lucrați cu umplutură și margine, evitați unitățile de măsură absolute. Astfel de unități nu se adaptează la modificările dimensiunilor fontului și lățimii ecranului.

Să presupunem că setați lățimea elementului la 50% și marja la 15px. La o lățime de 1200px, lățimea elementului va fi de 600px, iar marginea va fi de 15px. La lățimea de 769 px, lățimea elementului va fi de 384 px, iar marginea va fi în continuare de 15 px.

Lățimea elementului s-a modificat cu 36%, dar marja sa a rămas aceeași. În cele mai multe cazuri, aceasta nu este cea mai mare o problema mare. Cu toate acestea, dacă setați marja elementului la un procent, veți avea mai mult control asupra aspectului paginii pe toate ecranele. Totul va arăta proporțional fără sărituri bruște în marja aplicată și valorile de umplutură.

De asemenea, s-ar putea să doriți să adăugați umplutură la elementele de text din pagină. În cele mai multe cazuri, doriți ca umplutura să fie proporțională cu dimensiunea fontului de pe element. Acest lucru este imposibil de făcut în unități absolute. Cu toate acestea, dacă setați umplutura la em, aceasta se va ajusta automat la dimensiunea fontului. Demo de mai jos arată scalarea în acțiune.

Cum calculează browserele marja și umplutura pentru diferite unități de măsură

Browserele calculează marja finală și valorile de umplutură diferit, în funcție de unitățile de măsură.

Marja și umplutura, specificate ca procent, sunt calculate în raport cu lățimea containerului. Adică, 5% umplutură va fi egală cu 5px dacă lățimea containerului este de 100px sau 50px dacă lățimea containerului este de 1000px. Nu uitați că valorile de sus și de jos sunt calculate și în funcție de lățimea containerului.

În cazul em, marginea și umplutura se bazează pe dimensiunea fontului elementului. În demonstrația anterioară, umplutura pe cele trei elemente de text de jos este 1em. Din cauza marimi diferite font, valoarea de umplutură calculată va fi întotdeauna diferită.

Există, de asemenea, 4 unități de măsură de vizualizare vw, vh, vmin și vmax. În acest caz, marja și valorile de umplutură vor depinde de portul de vizualizare. De exemplu, padding 5vw va fi egal cu 25px cu o lățime a ferestrei de vizualizare de 500px, iar padding 10vw va fi egal cu 50px pe același viewport. Puteți studia aceste unități de măsură mai detaliat în articolul de pe site-ul SitePoint „Vizualizarea CSS a unităților de măsură: pornire rapidă”.

Dacă sunteți începător, cunoașterea modului în care funcționează aceste unități vă va ajuta să înțelegeți rapid de ce umplutura și marginea elementelor HTML se modifică în funcție de dimensiunea părintelui, a fontului sau chiar a ferestrei de vizualizare. Și acest lucru vă va oferi posibilitatea de a vă controla aspectul.

Colapsul marginilor

De asemenea, trebuie să știți despre conceptul de colapsare a marjelor. În anumite situații, marginile de sus și de jos ale două elemente se pot prăbuși într-unul singur. Acest fenomen se numește colapsul marginii.

Să presupunem că aveți două elemente unul sub celălalt, adică. pe acelasi nivel. Dacă setați o marjă de jos de 40 px pe primul element și o marjă de sus de 25 px pe al doilea, atunci marja totală dintre elemente nu va fi egală cu 65 px. Indentația va fi egală cu valoarea marjei mai mari, adică. 40px.

De asemenea, marja se poate prăbuși între părinte și primul sau ultimul copil. Acest lucru se întâmplă dacă nu există chenar, umplutură sau conținut inline care să separe marginile copil și părinte. În acest caz, dacă nu există nicio umplutură sau chenar pe părinte, marginea elementului copil va „curge” din părinte.

Acest comportament poate fi corectat. Pentru a face acest lucru, trebuie să adăugați o barieră între marginile părinte și copil. Demo-ul de mai jos arată cum să adăugați un chenar sau o umplutură element părinte vă permite să remediați problema.

În cazul marjelor negative valoarea finală marja restrânsă este egală cu suma marjei pozitive cu cea mai mică negativă. Puteți studia subiectul colapsării marjelor mai detaliat în articolul „Collapsing Margins” de Adam Roberts.

Modalități interesante de a folosi marginea și umplutura

Uneori, marginile și umplutura pot ajuta la rezolvarea problemelor de aspect. Mai jos sunt câteva exemple:

Mențineți raportul de aspect în imagini

Adesea, imaginile de pe o pagină au rapoarte de aspect diferite. Dacă trebuie să afișați toate imaginile cu același raport de aspect, umplutura CSS vă va ajuta.

Pentru a face acest lucru, trebuie să setați înălțimea părintelui la zero, iar proprietatea padding-top a părintelui ar trebui să fie egală cu valoarea raportului de aspect, exprimată ca procent.

De exemplu, un raport de aspect de 16:9 este obținut prin umplutură: 56,25% 0 0 0. Valoarea 56,25 este obținută prin (9/16)*100. Folosind această metodă, puteți calcula procentele de umplutură pentru orice alt raport de aspect.

Concluzie

Dacă abia începi să înveți CSS, sper că acest tutorial te-a ajutat să înțelegi diferența dintre margine și umplutură. Trebuie să învățați cum să setați marginea și umplutura folosind abrevieri și unități de măsură adecvate. În ultima secțiune am arătat două moduri interesante aplicarea proprietăților în machete și, de asemenea, v-a oferit link-uri către resurse pentru învățare ulterioară. Dacă aveți alte sfaturi despre marginea CSS și umplutura, vă rugăm să le postați în comentarii.

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 o 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 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 vizuala 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 face parte din element.

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 de obicei 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 „împacheta” totul ș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 gestionează 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 marginea „d regiunea 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.

Când să folosiți câmpurile

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. panou 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., deci 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 schimbi regulat cu editorii W3C și WHATWG) ar trebui să-l ai 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 la element, ci mai degrabă utilizați un element copil/copii pe el 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 marginii stabilesc dimensiunea spațiului din afara marginii marginii. 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 total peste adaos. Există 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 limitele devin accesibile și modul în care granițele și caseta de conținut le fac diferite.

În capitolul precedent am menționat astfel Proprietăți CSS, cum ar fi marginea (câmpul) și umplutura (indentarea). Acum le vom analiza mai detaliat și vom lua în considerare modul în care diferă unele de altele și ce caracteristici au.

Puteți crea spații între elemente într-un fel sau altul, dar dacă umplutura este indentarea de la conținut până la marginea blocului, atunci marginea este distanța de la un bloc la altul, spațiul interbloc. Captura de ecran arată un exemplu clar:

Umplutura separă conținutul de marginea blocului, iar marginea creează goluri între blocuri

După cum puteți vedea, câmpurile și Umplutură CSS diferă unul de celălalt, deși uneori, fără să se uite la cod, este imposibil să se determine ce proprietate este folosită pentru a seta distanța. Acest lucru se întâmplă atunci când lipsește cadrul sau fundalul blocului de conținut.

Există următoarele proprietăți pentru a seta marginea sau umplutura în CSS pe fiecare parte a unui element:

Captuseala:

padding-top: sens;
padding-dreapta: sens;
umplutură de fund: sens;
padding-stânga: sens;

Câmpuri:

margin-top: sens;
margine-dreapta: sens;
margine-jos: sens;
margine-stânga: sens;

Valorile pot fi specificate în orice unități CSS– px, em, % etc. Exemplu: margin-top: 15px .

Există, de asemenea, foarte lucru convenabil ca prescurtare pentru margine și padding CSS. Dacă trebuie să setați margini sau umplutură pe toate cele patru laturi ale unui element, nu trebuie neapărat să scrieți proprietatea pentru fiecare parte individual. Totul este simplificat: pentru margine și umplutură puteți specifica 1, 2, 3 sau 4 valori deodată. Numărul de valori determină modul în care sunt distribuite setările:

4 valori: padding este setat pentru toate laturile elementului în următoarea secvență: sus, dreapta, jos, stânga: padding: 2px 4px 5px 10px;
3 valori: umplutura este setată mai întâi pentru partea de sus, apoi simultan pentru stânga și dreapta, iar apoi pentru partea de jos: padding: 3px 6px 9px;
2 valori: umplutura se setează mai întâi simultan din partea de sus și de jos, iar apoi simultan pentru stânga și dreapta: padding: 6px 12px;
1 valoare: padding egal este setat pentru toate laturile elementului: padding: 3px;

Aceleași reguli se aplică proprietății marjei CSS. Vă rugăm să rețineți că puteți utiliza și valori negative pentru marjă (de exemplu, -3px), care uneori pot fi destul de utile.

Imaginează-ți situația: doi element bloc sunt situate unul peste altul și au câmpuri de margine. Blocul de sus este setat la margine: 60px , iar blocul de jos este setat la margine: 30px . Ar fi logic să presupunem că cele două câmpuri de margine a două elemente se vor atinge pur și simplu și, ca urmare, decalajul dintre blocuri va fi egal cu 90 de pixeli.

Cu toate acestea, lucrurile stau altfel. De fapt, într-o astfel de situație, apare un efect numit colaps, atunci când cea mai mare dimensiune este selectată din două câmpuri adiacente de elemente. În exemplul nostru, distanța finală dintre elemente va fi de 60 de pixeli.

Marginea restrânsă funcționează numai pentru marginile de sus și de jos ale elementelor și nu se aplică marginilor din partea dreaptă și stângă. Valoarea decalajului final este calculată în situatii diferite diferit:

Când ambele valori ale marjei sunt pozitive, dimensiunea marjei rezultată va fi egală cu valoarea mai mare.
Dacă una dintre valori este negativă, atunci pentru a calcula dimensiunea câmpului trebuie să obțineți suma valorilor. De exemplu, cu valori de 20px și -18px dimensiunea câmpului va fi:
20 + (-18) = 20 – 18 = 2 pixeli.
Dacă ambele valori sunt negative, se compară modulele acestor numere și se selectează numărul cu modulul mai mare (deci cel mai mic dintre cele două). numere negative). Exemplu: trebuie să comparați valorile câmpurilor -6px și -8px. Modulele numerelor comparate sunt 6, respectiv 8. Rezultă că 6 -8. Dimensiunea câmpului rezultată este de -8 pixeli.
În cazul în care valorile sunt specificate în unități diferite CSS, se reduc la unul, după care se compară și se selectează valoarea mai mare.
dimensiunea marjei pentru elemente copil este definit și mai interesant: dacă copilul are un câmp de marjă mai mare decât părintele, atunci i se acordă prioritate. În acest caz, dimensiunile marginilor de sus și de jos ale părintelui vor fi aceleași cu cele specificate pentru copil. În acest caz, nu va exista distanță între părinte și copil.