Dimensionarea elementelor în CSS

Dimensiunea naturală (intrinsecă) a elementelor

Elementele HTML au o dimensiune naturală, numită și dimensiune intrinsecă, înainte de a fi modificată prin CSS.

Gândește-te la o imagine, de exemplu. Aceasta are o lățime și o înălțime definite în fișierul propriu — dimensiunea ei intrinsecă.

Dacă introduci o imagine într-un document HTML fără să-i modifici dimensiunile prin CSS, ea va fi afișată la dimensiunea sa originală.

În exemplul de mai jos, am plasat o imagine într-un container pentru a evidenția dimensiunea fișierului:

🔧 Exemplu: Imagine cu dimensiune intrinsecă

<div class="container">
  <img src="imagini/star.jpg" alt="Stea">
</div>

.container {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border: 5px solid navy;
}

img {
  border: 5px solid darkblue;
  max-width: 100%;
  height: auto;
}

Imaginea este plasată într-un <div> fără dimensiuni proprii, căruia i-am atribuit clasa container și un chenar de 5px.

Dacă scoatem imaginea din container, chenarul acestuia se va „prăbuși” și vom vedea doar o linie groasă, întinsă pe toată lățimea ferestrei browserului — deoarece <div> este un element de tip block.

Chenarul containerului este vizibil doar pentru că imaginea din interior îi „împinge” marginile cu dimensiunea sa intrinsecă.

🔧 Exemplu: Container fără conținut

<div class="container">
  <!--<img src="imagini/star.jpg" alt="Stea">-->
</div>

.container {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border: 5px solid navy;
}

img {
  border: 5px solid darkblue;
  max-width: 100%;
  height: auto;
}

Setarea unei dimensiuni specifice

Putem atribui o dimensiune specifică elementelor care compun layout-ul pe care îl construim.

Atunci când un element are dimensiuni stabilite și conținutul se încadrează perfect în acele dimensiuni, vorbim despre dimensiunea extrinsecă.

Așa cum am văzut în exemplul anterior, un <div> gol nu are lățime și înălțime. Însă, odată ce îi setăm dimensiuni explicite, elementul va respecta aceste valori, indiferent dacă are sau nu conținut. Iată un exemplu:

🔧 Exemplu: div gol cu dimensiuni setate

<div>800 × 250</div>

div {
  width: 800px;
  height: 250px;
  margin: 0 auto;
  background-color: #fff;
  border: 5px solid navy;
  color: #000;
  text-align: center;
  line-height: 250px;
  font-family: system-ui, sans-serif;
  font-size: 1.2rem;
}

După cum am observat în lecția anterioară, conținutul unui element cu înălțime fixă poate „revărsa” în afara containerului. Pentru a evita acest comportament, este important să alegem cu atenție unitățile de măsură — fie lungimi absolute (px, em), fie relative (%, vh, vw) — în funcție de context.

Utilizarea procentelor

În multe situații, procentele acționează ca unități de lungime și pot fi utilizate interschimbabil cu valorile fixe. Dar despre ce fel de procente vorbim?

Dacă avem o cutie „părinte” care conține o cutie „copil”, iar pentru aceasta din urmă setăm o lățime exprimată în procente, acele procente reprezintă o parte din dimensiunea cutiei „părinte”.

🔧 Exemplu: Utilizare procente

<div class="box">
  Am o lățime de 50%.
</div>

.box {
  border: 5px solid tomato;
  width: 50%;
  background-color: #fff;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  text-align: center;
}

Dacă nu am fi setat o lățime elementului din exemplul de mai sus, acesta — fiind un element de tip bloc — ar fi ocupat tot spațiul disponibil pe orizontală.

Umpluturi și margini în procente

Atunci când atribuim procente pentru proprietățile padding și margin, putem observa un comportament neașteptat.

În exemplul următor, am atribuit unei cutii o umplutură de 10% și o margine de 10% pe toate cele patru laturi:

🔧 Exemplu: Umplutură și margine în procente

<div class="container">
  <div class="box">
    Am o margine și o umplutură de 10%, pe toate laturile.
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  background-color: #f9f9f9;
  padding: 2rem;
}

.box {
  border: 5px solid darkblue;
  width: 300px;
  margin: 10%;
  padding: 10%;
  background-color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  text-align: center;
}

Probabil că te-ai aștepta ca marginea de sus și cea de jos să reprezinte 10% din înălțimea cutiei, iar cele laterale 10% din lățimea cutiei.

Ei bine, nu este așa! În CSS, valorile procentuale pentru padding și margin sunt calculate în funcție de lățimea elementului părinte, nu de înălțime. Așadar, toate cele 10% sunt raportate la lățimea containerului — adică la viewport width, dacă nu există alt părinte cu dimensiuni explicite.

Dimensiuni minime și maxime

Pe lângă dimensiunile fixe, putem solicita CSS să atribuie elementelor o dimensiune minimă sau maximă.

Acest lucru este util atunci când avem o cutie fără conținut fix. Prin setarea unei înălțimi minime, cutia va avea întotdeauna cel puțin acea înălțime, dar dacă există mai mult conținut și spațiu disponibil, ea se va adapta și va crește corespunzător.

În exemplul următor, poți vedea două cutii, ambele cu o înălțime minimă de 150px. Cutia din stânga are 150px înălțime, iar cea din dreapta are conținut care necesită mai mult spațiu, astfel că se va extinde peste valoarea minimă:

🔧 Exemplu: Înălțime minimă

<div class="container">
  <div class="box"></div>
  <div class="box">
    Aceste cutii au o înălțime minimă setată, dar această cutie are conținut care necesită mai mult spațiu, astfel că nu va respecta înălțimea setată inițial și va crește pentru a încadra tot conținutul. <br>
    Aceste cutii au o înălțime minimă setată, dar această cutie are conținut care necesită mai mult spațiu, astfel că nu va respecta înălțimea setată inițial și va crește pentru a încadra tot conținutul. <br>
    Aceste cutii au o înălțime minimă setată, dar această cutie are conținut care necesită mai mult spațiu, astfel că nu va respecta înălțimea setată inițial și va crește pentru a încadra tot conținutul.
  </div>
</div>

.container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}

.box {
  border: 5px solid tomato;
  min-height: 150px;
  width: 200px;
  margin: 1rem;
  background-color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  padding: 1rem;
}

După cum intuiești deja, comportamentul de adaptare a înălțimii elementului la conținut este util pentru a evita revărsarea conținutului.

În ceea ce privește lățimea maximă (max-width), aceasta este utilizată frecvent pentru a determina imaginile să se reducă dacă nu există suficient spațiu pentru a fi afișate la dimensiunea lor intrinsecă. Astfel, ne asigurăm că imaginile nu vor deveni mai mari decât lățimea maximă setată.

De exemplu, dacă setăm lățimea unei imagini la 100%, iar lățimea intrinsecă a acesteia este mai mică decât lățimea containerului, imaginea va fi scalată automat și poate deveni pixelată.

Dacă lățimea intrinsecă a imaginii este mai mare decât cea a containerului, aceasta se va revărsa în afara containerului.

Niciuna dintre aceste situații nu este ideală.

În schimb, dacă utilizăm max-width: 100%;, imaginea poate fi scalată la o dimensiune mai mică decât dimensiunea intrinsecă, dar nu va depăși 100% din lățimea containerului.

În exemplul următor am utilizat aceeași imagine de trei ori:

Pentru prima imagine am setat lățimea la 100% și am plasat-o într-un container mai mare decât dimensiunea sa intrinsecă. Imaginea se va extinde până la marginile containerului.
Pentru a doua imagine am utilizat max-width: 100%;, astfel că nu se va extinde complet până la marginile containerului.
Pentru a treia imagine am utilizat tot max-width: 100%;, dar am plasat-o într-un container mai mic, astfel că se va micșora pentru a încăpea în container.

🔧 Exemplu: Imagini cu dimensiuni minime și maxime

<div class="container">
  <div class="box"><img src="imagini/star.jpg" alt="Stea" class="latime"></div>
  <div class="box"><img src="imagini/star.jpg" alt="Stea" class="max"></div>
  <div class="minibox"><img src="imagini/star.jpg" alt="Stea" class="max"></div>
</div>

.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 1rem;
}

.box, .minibox {
  border: 5px solid darkblue;
  background-color: #fff;
  padding: 0.5rem;
}

.box {
  width: 350px;
}

.minibox {
  width: 50px;
}

.latime {
  width: 100%;
}

.max {
  max-width: 100%;
  height: auto;
  display: block;
}

Aceste tehnici sunt utilizate frecvent pentru a face ca imaginile să se adapteze automat, astfel încât, atunci când sunt vizualizate de pe dispozitive mai mici, să fie scalate corespunzător (micșorate proporțional).

Totuși, ar trebui să eviți utilizarea acestei tehnici atunci când încarci imagini foarte mari și le micșorezi direct în browser.

Este recomandat să reduci dimensiunile imaginilor într-un editor grafic, pentru a evita scalarea excesivă în browser.

Descărcarea imaginilor prea mari poate încetini semnificativ site-ul.

Unitățile viewport

Viewport-ul este zona vizibilă a paginii pe care o vedeți chiar acum, în browserul utilizat pentru a accesa un site — și are, desigur, o dimensiune proprie.

Unitățile CSS care se referă la dimensiunea viewport-ului sunt vw (pentru lățime) și vh (pentru înălțime).

Folosind aceste unități, putem dimensiona elementele în raport cu afișajul dispozitivului utilizatorului.

După cum știți deja din secțiunea „Valori și unități”, 1vh reprezintă 1% din înălțimea viewport-ului, iar 1vw reprezintă 1% din lățimea acestuia. Putem utiliza aceste unități pentru a dimensiona cutii, dar și text.

În exemplul de mai jos avem o cutie cu dimensiunile 20vh și 20vw, care conține litera „B” cu o dimensiune de font de 15vh:

🔧 Exemplu: Unități vh-vw

<div class="container">
  <div class="box">B</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  border: 5px solid navy;
  width: 20vw;
  height: 20vh;
  font-size: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  font-family: system-ui, sans-serif;
}

În exemplul de mai sus, dacă modificăm valorile vh și vw, vom observa cum dimensiunea cutiei și a fontului se schimbă. Acest lucru se întâmplă și dacă redimensionăm fereastra browserului — atât pe orizontală, cât și pe verticală. Încercați să redimensionați fereastra pentru a vedea comportamentul cutiei și al conținutului.

Dimensionarea relativă la viewport a elementelor HTML este extrem de utilă în web design.

De exemplu, dacă doriți ca atunci când utilizatorii accesează site-ul dvs. să vadă o pagină „full hero” (o secțiune care ocupă întregul ecran), puteți dimensiona acea secțiune folosind height: 100vh;. Restul conținutului va fi vizibil doar prin scroll, fiind împins în afara viewport-ului.

De fapt, vorbim despre o tehnică des utilizată de designeri, numită above the fold, care se referă la porțiunea vizibilă a unei pagini web imediat după încărcare.

🔧 Exemplu: Secțiune fullscreen

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Exemplu secțiune fullscreen</title>
</head>
<body>  

<div class="a">
  <a href="#" class="logo">Logo</a>
  <ul>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
  </ul>
  <h1>Above the fold</h1>
  <p>Prima secțiune a site-ului<p>
</div>

<div class="b">
  <h1>Below the fold</h1>
  <h2>Sectiunea a doua</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<p>
</div>

</body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  text-align: center;
  font-family: "sans-serif";
  font-size: 3.5vw;
}

.logo {
  position: absolute;
  left: 40px;
  top: 40px;
  color: #fff;
  text-decoration: none;
}

ul {
  position: absolute;
  display: flex;
  right: 40px;
  top: 40px;
  list-style: none;
}

ul li {
  padding: .2rem 1rem;
  margin: 0 1rem;
  background-color: #fff;
  border-radius: 8px;
}

ul li a {
  text-decoration: none;
  color: tomato;
}

h2 {
  padding-bottom: 2rem;
}

.a {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/vwa.jpg") center/cover;
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.b {
  background: #aadd66;
  padding: 15vh 2vh;
}

Recapitulare și bune practici

În această lecție am explorat metodele de dimensionare a elementelor HTML cu CSS. Mai jos găsești o sinteză a conceptelor-cheie, împreună cu exemple simple și recomandări moderne:

Dimensiunea intrinsecă

Elementele precum imaginile au dimensiuni naturale definite în fișierul sursă. Dacă nu le stilizăm, se vor afișa la dimensiunea lor originală.

Exemplu:

img {
  border: 2px solid navy;
  max-width: 100%;
  height: auto;
}

Folosește max-width: 100% pentru ca imaginea să nu depășească containerul.

Dimensiuni specifice

Poți seta dimensiuni fixe sau fluide. Pentru layout-uri responsive, evită valorile rigide.

Exemplu:

.box {
  width: clamp(300px, 50%, 600px);
  height: 200px;
}

clamp() oferă flexibilitate: între 300px și 600px, dar preferă 50%.

Procente

Procentele se raportează la dimensiunea părintelui. Sunt utile pentru lățimi fluide.

Exemplu:

.child {
  width: 60%;
}

Dacă părintele are 800px, copilul va avea 480px.

Umpluturi și margini în procente

Procentele pentru padding și margin se calculează față de lățimea containerului.

Exemplu:

.box {
  padding: 10%;
  margin: 5%;
}

Chiar și padding-top va fi 10% din lățime, nu din înălțime.

Dimensiuni minime și maxime

Folosește min-width și max-width pentru a controla scalarea elementelor.

Exemplu:

.image {
  width: 100%;
  max-width: 500px;
}

Imaginea se va micșora pe ecrane mici, dar nu va depăși 500px.

Unități viewport

vw și vh sunt utile pentru layout-uri full-screen sau fonturi scalabile.

Exemplu:

.hero {
  height: 100vh;
  font-size: 5vw;
}

Secțiunea va ocupa tot ecranul, iar textul se va scala cu lățimea viewport-ului.

Bonus: Funcții CSS moderne

Folosește min(), max() și clamp() pentru control fluid.

Exemplu:

.card {
  width: min(90%, 600px);
}

Cardul va avea maximum 600px, dar nu mai mult de 90% din container.

Sfaturi finale

Folosește unități relative (%, vw, rem) pentru design adaptabil.
Testează comportamentul elementelor cu conținut variabil.
Optimizează imaginile înainte de încărcare — nu le micșora doar prin CSS.
Combină min, max și clamp pentru layout-uri robuste.

🧠 Quiz - CSS Dimensionarea Elementelor

CSS media ➔