Care este diferența dintre umplutură și margine. Padding, Margin and Border - setăm căptușeală internă și externă în CSS, precum și cadre pentru toate părțile (sus, jos, stânga, dreapta)
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ă trecem la situație tipică, care este cel mai probabil familiar fiecărui dezvoltator interfața cu utilizatorulîn 2017. Avem un șablon simplu de card.
În acest exemplu, se pot distinge două tipuri de intervale:
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 oricare suma 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 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ă utilizaț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:
căptușeală— pentru spațiile dintre recipient și conținutul acestuia.
marginea— pentru spațiile dintre elementele din interiorul containerului.
Astăzi vom lucra la înțelegerea diferenței dintre padding HTML ( căptușeală) ș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 normală 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ă " căptușeală«.
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 pixeli și o umplutură de stânga și dreapta de 20 de pixeli. 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!
Al nostru ultima versiune prescurtarea pentru umplutură și margine HTML 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 umplutură ca umplutură 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. In imaginea din dreapta am folosit-o instrumente Google Chrome pentru a arăta unde începe/se termină completarea HTML pentru acest element. Culoarea verdeîn 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 a devenit mai mică deoarece marginea se îndepărtează de marginile celeilalte element HTML. În dreapta poți vedea asta culoare portocalie– aceasta 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 folosești mai mult Proprietăți CSSși schimbați-le valorile, cu atât veți înțelege mai bine cum funcționează.
Traducerea articolului „ PADDING CSS VS. MARJA SI CUM SE UTILICE” a fost pregătit de echipa prietenoasă de proiect.
Rău Bun
- 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 baza:
- 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(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ă:
- Departe, departe, dincolo de verbal.
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 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.
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 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 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).
Ultimul element al grupului are indentarea 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 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 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
De la autor: Când am început să învăț CSS, am continuat să fiu confuz cu privire la margine și umplutură. 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 despre ce vorbim, mai jos este o diagramă.
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. Căptușeala și chenarul sunt adăugate peste dimensiunile specificate, ceea ce poate duce la consecințe neașteptate pentru aspectul 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 dreapta)=224px. Deoarece acesta este un pătrat, înălțimea va fi, de asemenea, de 224 px.
Pe de altă parte, modelul tradițional bloc ia ca lățime suma conținutului, 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.
Iată 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 demonstrația interactivă distractivă a lui 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%;
Ce să-ți amintești
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 marja 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 a acestui element. Î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, margine element copil va „curge” de la 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 adăugarea unui chenar sau umplutură la elementul părinte poate rezolva problema.
În cazul marjelor negative valoarea finală marja restrânsă este egală cu suma marjei pozitive cu cea mai mică negativă. Puteți studia mai detaliat subiectul colapsării marjelor î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, acest lucru vă va ajuta Umplutură CSS.
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 și alte sfaturi despre marginea CSS și umplutura, vă rugăm să le postați în comentarii.
Descriere
Setează cantitatea de umplutură de la fiecare margine a elementului. Marja este spațiul de la marginea elementului curent până la marginea interioară a elementului părinte (Fig. 1).
Orez. 1. Indentare din marginea stângă a elementului
Dacă elementul nu are părinte, umplutura va fi distanța de la marginea elementului până la marginea ferestrei browser, ținând cont că și fereastra în sine are setată implicit padding. Pentru a scăpa de ele, ar trebui să setați valoarea marjei pentru selector
egal cu zero.proprietatea marjei vă permite să setați valoarea indentării pentru toate părțile unui element simultan sau să o definiți numai pentru laturile specificate.
Sintaxă
marja: [valoare | interes | auto] (1,4) | moşteni
Valori
Puteți utiliza una, două, trei sau patru valori, separate printr-un spațiu. Efectul depinde de numărul de valori și este prezentat în tabel. 1.
Cantitatea de indentare poate fi specificată în pixeli (px), procent (%) sau alte valori acceptabile. unități CSS. Valoarea poate fi un număr pozitiv sau negativ.
Auto Specifică că dimensiunea indentării va fi calculată automat de browser. inherit Moștenește valoarea părintelui.
HTML5 CSS2.1 IE Cr Op Sa Fx
Rezultat acest exemplu prezentată în fig. 2.
Orez. 2. Aplicarea proprietății marjei
Model obiect
document.getElementById("elementID").style.margin
Browsere
Internet Explorer 6 în modul ciudat nu acceptă centrarea unui bloc folosind regula automată marjă: 0. Există, de asemenea, o eroare în acest browser cu dublarea valorii de umplutură la stânga sau la dreapta pentru elementele plutitoare imbricate în interior elementele părinte. Marja care este adiacentă laturii părintelui este dublată. Problema este de obicei rezolvată prin adăugarea display: inline la elementul plutit.
Versiunile de Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire.
Notă
U elemente de bloc situate una lângă alta pe verticală, se observă un efect de colaps atunci când indentările nu sunt însumate, ci combinate între ele. Colapsul în sine acționează asupra a două sau mai multe blocuri (unul poate fi imbricat în altul) cu indentări în partea de sus sau de jos, în timp ce indentările adiacente sunt combinate într-unul singur. Pentru căptușeala din stânga și din dreapta, restrângerea nu este niciodată aplicată.
Restrângerea nu funcționează:
- pentru elementele care au proprietatea de umplutură setată pe partea care se prăbușește.
- pentru elementele care au o limită specificată pe partea care se prăbușește;
- pe elemente cu poziționare absolută, adică cei a căror poziție este setată la absolut;
- pe elementele plutitoare (pentru care proprietatea float este setată la stânga sau la dreapta);
- Pentru elemente inline;
- Pentru .
