Majoritatea designerilor web cred că cunosc destul de bine CSS. La urma urmei, nu este atât de mult – câteva tipuri de selectoare, câteva zeci de proprietăți și câteva reguli în cascadă pe care abia trebuie să le amintiți, deoarece se rezumă la bunul simț. Dar când ajungi la nivelul esențial, există o mulțime de detalii obscure pe care puțini designeri le înțeleg cu adevărat.

Când am examinat rezultatele unui test CSS gratuit pe care l-am oferit online în ultimele șase luni, am descoperit o întrebare pe care aproape nimeni nu a înțeles- o . Dintre miile de oameni care au susținut testul, mai puțin de 14% au făcut-o corect .

Întrebarea se rezumă la asta: Cum calculezi marjele procentuale?

Intrebarea

Să presupunem că site-ul tău are un container divși, în interiorul acestuia, un conținut div:

Acum, să dăm acestui conținut divo marjă superioară:

Bine, deci este 10%… dar 10% din ce ? Aceasta este întrebarea la care doar 13,8% dintre oameni pot răspunde corect . Și rețineți: acești oameni au acces la Google!

Ceea ce îmi place la această întrebare este că se pare că răspunsul ar trebui să fie evident . Atât de mult, încât bănuiesc că majoritatea oamenilor doar ghicesc (și ghicesc greșit). Dar poate că nu ți se pare evident. Adică, dacă îți folosești cu adevărat imaginația, există multe moduri în care browserul ar putea calcula o marjă ca aceasta.

Deci, ce zici dacă o restrâng pentru tine, deoarece întrebarea din test este de fapt cu alegere multiplă. Iată opțiunile dvs.:

• 10% din înălțimea div-ului conținutului
• 10% din înălțimea div-ului containerului
• 10% din lățimea div-ului conținutului
• 10% din lățimea div-ului containerului

Amintiți-vă, doar 13,8% dintre oameni pot alege răspunsul corect din această listă. E mult mai rău decât șansa!

Privește cu atenție răspunsurile; veți vedea că sunt de fapt doar două lucruri pe care trebuie să le știți:

Container sau Conținut?

În primul rând, dimensiunea marjei se bazează pe dimensiunea div-ului de conținut în sine sau pe dimensiunea div-ului containerului ?

Acum, aceasta nu este o idee, dar probabil că poți avea încredere în instinctele tale. Dacă aș seta un div să fie de 50% din lățimea containerului său și apoi vreau ca marginile din stânga și din dreapta să umple restul spațiului, le-aș seta în mod natural la 25% fiecare (deci procentele se adună la 100%). Pentru ca acest lucru să funcționeze, marjele procentuale trebuie să se bazeze pe dimensiunile containerului.

Destul de sigur, două treimi dintre persoanele care susțin testul primesc această parte a răspunsului corect.

Latime sau Inaltime?

În al doilea rând, dimensiunea margin-top se bazează pe lățimea sau înălțimea acelui element ?

Dacă ai fost atent, probabil că ești deja în garda. Pentru ca atât de puțini oameni să aleagă răspunsul corect, aceasta trebuie să fie o întrebare trucată, nu?

Și totuși, pun pariu că abia îți vine să crezi că răspunsul nu este înălțimea. Ei bine, nu este.

Da, aici vorbim de o marjă superioară. Da, dimensiunea acelei margini este o măsurare verticală. Da, dacă un bloc are 50% din înălțimea containerului său și i-ai dat o marjă superioară de 25%, te-ai aștepta să fie de 25% din înălțimea containerului. Și ai greși.

Nu te simți rău dacă ai crezut că trebuie să fie înălțimea. Aproape 80% dintre persoanele care susțin testul sunt de acord cu tine:

Are sens… Nu, într-adevăr!

Tot nu crezi? Iată un citat din specificația CSS W3C :

Procentul este calculat în raport cu lățimea blocului care conține cutia generată. Rețineți că acest lucru este valabil și pentru margine de sus și margine de jos.

Același lucru este valabil și pentru căptușeala de sus și de jos, în cazul în care vă întrebați. În ceea ce privește chenarele, este ilegal să le specificați lățimea ca procent.

Deci, în acest moment, probabil vă gândiți că creatorii CSS fie sunt nebunești , fie au făcut o greșeală cu adevărat stupidă. Dar sunt aici să vă spun că există două motive bune pentru a baza marjele verticale pe lățimea blocului care le conține:

Consistență orizontală și verticală

Există, desigur, o proprietate scurtă care vă permite să specificați marja pentru toate cele patru laturi ale unui bloc:

Aceasta se extinde la:

Acum, dacă ai scrie oricare dintre cele de mai sus, probabil te-ai aștepta ca marjele de pe toate cele patru laturi ale blocului să fie de dimensiuni egale, nu-i așa? Dar dacă margin-left și margin-right s-ar baza pe lățimea containerului, iar margin-top și margin-bottom s-ar baza pe înălțimea acestuia, atunci ar fi de obicei diferite!

Evitarea dependenței circulare

CSS prezintă conținutul în blocuri stivuite vertical pe pagină, astfel încât lățimea unui bloc este de obicei dictată în întregime de lățimea părintelui său. Cu alte cuvinte, puteți calcula lățimea unui bloc fără să vă faceți griji cu privire la ceea ce se află în interiorul acelui bloc .

Înălțimea unui bloc este o problemă diferită. De obicei, înălțimea depinde de înălțimea combinată a conținutului său . Schimbați înălțimea conținutului și modificați înălțimea blocului. Vezi problema?

Pentru a obține înălțimea conținutului, trebuie să cunoașteți marginile de sus și de jos care sunt aplicate acestuia. Și dacă acele marje depind de înălțimea blocului părinte, ai probleme, pentru că nu poți calcula una fără să-l cunoști pe cealaltă!

Bazarea marginilor verticale pe lățimea containerului rupe această dependență circulară și face posibilă aranjarea paginii.

 AllmaDesign vă oferă servicii profesionale de web design la prețuri avantajoase, creare site-uri prezentare pentru companii mici și mijlocii, creare magazine online și cataloage de produse, precum și alte servicii conexe: întreținere și administrare site-uri web, optimizare SEO și promovare online, design grafic și identitate companie, găzduire web și înregistrare nume de domenii.