Să ne amintim pentru totdeauna: care este diferența dintre margine și umplutură. Proprietățile PADDING și MARGIN și modul de utilizare a acestora

Bună ziua, dragi cititori ai 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 intra în specificul 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. când se specifică o valoare pozitivă pentru marginea exterioară, mutăm elementul adiacent la distanța specificată, iar dacă specificăm o valoare negativă, blocul învecinat 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:

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ă indentările 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).
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, care 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ă.
Ș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 (descurcarea marginilor poate avea loc doar 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 totuși 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 Marginei 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 de linie va funcționa, dar căptușeala internă crescută nu va afecta poziția sa generală în raport cu 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:

Border-width — setează grosimea chenarului
Border-color — își stabilește culoarea
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:

Subțire - linie subțire;
Mediu - medie (această valoare este utilizată implicit);
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:

Niciunul - fără chenar (implicit)
Punctată - linia este trasată cu puncte
Linie punctată - linie punctată
Solid - linie continuă
Linie dublă - dublă
Groove - cadru deprimat
Creasta - proeminentă
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ă) - modalități 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

În timp ce rătăceam pe forumuri am dat de faptul că încă se pune întrebarea, ce face căptușeală, 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).

text, text, mult text, mult text text

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.

Practic, asta-i tot. Cu toate acestea, există încă câteva caracteristici de lucru cu ei.

Caracteristici de margine și 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 structuri de scriere scurtă, de exemplu marginea: 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 sus, al doilea este în dreapta, al treilea este în jos, al patrulea este pe stânga.

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

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 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 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ă (

box-sizing: 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 margin-sus, margin-dreap, margin-bottom și margin-left. 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 problemă. 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. Datorită dimensiunilor diferitelor fonturilor, valoarea calculată pentru umplutură 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 restrângere 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.

La fel, 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 adăugarea unui chenar sau umplutură la elementul părinte poate rezolva problema.

În cazul marjelor negative, valoarea finală a marjei restrânse 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 raporturi 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 de a folosi proprietățile în machete și, de asemenea, v-am 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.

Articole notează IT HTML&CSS Să ne amintim pentru totdeauna: care este diferența dintre margine și umplutură
În timp ce rătăceam pe forumuri am dat de faptul că încă se pune întrebarea, ce face căptușeală, 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).

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

text, text, mult text, mult text text

Caracteristici de margine și de umplutură

Dacă blocurile au o proprietate CSS float, atunci trebuie să atribuiți blocurilor display:inline, astfel încât să nu existe marje duble în stânga și dreapta (pentru mai multe detalii, consultați articolul Cum se face Internet Explorer 6 și marja CSS proprietatea funcționează mai bine?)

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.

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 structuri de scriere scurtă, de exemplu marginea: 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!
+

În acest subiect puteți pune o întrebare despre material.

Să vedem diferența dintre margine și umplutură. Pentru a face acest lucru, să ne amintim încă o dată modelul bloc în CSS.

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

CAPTURĂ - 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.

ÎNĂLŢIME– o proprietate care stabilește înălțimea blocului;

LĂŢIME– o proprietate care stabilește lățimea blocului;

De obicei, elementul este folosit ca blocuri în CSS DIV. 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 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.