CSS Box Model - Explicații complete și exemple practice

Modelul cutiei - The box model

Modelul cutiei CSS reprezintă fundamentul machetării (layout-ul) paginilor web. Fiecare element este de fapt o cutie, care are conținut (content), umplutură (padding), chenar (border) și margine (margin), care stau împreună la fel ca straturile unei cepe.

Pe măsură ce browserul redă pagina, sunt calculate stilurile aplicate fiecărei cutii, precum și relațiile dintre toate cutiile din pagină. Înainte de a crea machete CSS (pagini web), trebuie să înțelegeți în totalitate modelul cutiei.

Margin

Border

Padding

Content

Fiecare element dintr-un document este structurat asemenea unei cutii, cu mai multe straturi, care pot fi modificate folosind o serie de proprietăți CSS caracteristice modelului cutiei, așa cum se poate vedea în imaginea de mai sus.

Proprietățile cutiei - Box Properties

Lățimea și înălțimea - acestea setează zona în care este afișat conținutul. Poate fi text, imagini sau alte cutii ce pot avea conținut propriu.

☞ Există și alte proprietăți care permit limitarea dimensiunilor, precum min-width, max-width, min-height și max-height.

Umplutura (padding) este spațiul dintre conținut și interiorul cutiei. Poate fi setată simultan pe toate cele patru laturi sau individual: padding-top, padding-right, padding-bottom, padding-left.
Chenarul (border) este situat între marginea exterioară a umpluturii și marginea interioară a marginii. Implicit are dimensiunea zero. Pentru vizibilitate se setează grosimea, stilul și culoarea (border: 2px solid red; sau individual pentru fiecare latură).

border-top / right / bottom / left - setare pentru o singură latură.
border-width / style / color - setare pentru toate laturile simultan.
border-top-width / style / color - setare individuală a unei singure proprietăți pe o singură latură.

Marginea (margin) - spațiul dintre cutii; poate fi setată global sau individual (margin-top, margin-right, margin-bottom, margin-left).

☞ Margin collapsing - dacă două cutii se ating, distanța dintre ele este egală cu cea mai mare dintre margini, nu suma lor.

Câteva considerații importante:

☞ Implicit background-color / background-image se extind până la chenar. Acest lucru se poate schimba prin background-clip.

La conținut ce depășește spațiul vizibil apar bare de scroll. Comportamentul se controlează cu overflow.

Înălțimea cutiilor depinde de conținut, cu excepția cazului în care se setează explicit o valoare fixă.

Proprietatea border ignoră dimensiunile procentuale.

Lățimea totală = width + padding-right + padding-left + border-right + border-left. box-sizing ajută la calcul corect.

Metode avansate de manevrare a cutiei

Dincolo de modificarea lățimii, chenarului, umpluturii și marginii, există alte proprietăți cu ajutorul cărora putem schimba comportamentul cutiilor.

Revarsare - Overflow

Când setăm dimensiunea unei cutii cu valori absolute (ex. width: 500px / height: 300px) și avem mai mult conținut decât spațiu disponibil, conținutul se va „revărsa” dincolo de cutie. Pentru a controla astfel de situații folosim proprietatea overflow cu una dintre valorile acceptate:

auto - dacă există prea mult conținut, partea care depășește este ascunsă și apar bare de derulare.
hidden - conținutul care depășește este ascuns complet.
visible - conținutul care depășește rămâne vizibil în afara cutiei (valoarea implicită).

🔧 Exemplu CSS overflow

<p class="autoscroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
<p>

<p class="clipped">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
<p>

<p class="default">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Mauris tempus turpis id ante mollis dignissim. Nam sed
   dolor non tortor lacinia lobortis id dapibus nunc. Praesent
   iaculis tincidunt augue. Integer efficitur sem eget risus
   cursus, ornare venenatis augue hendrerit. Praesent non elit
   metus. Morbi vel sodales ligula.
<p>

p {
  width  : 400px;
  height : 2.5em;
  margin : 2em auto;
  padding: 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto; }
.clipped    { overflow: hidden; }
.default    { overflow: visible; }

Background clip

Fundalurile cutiilor pot fi formate din culori și/sau imagini, stivuite una peste alta. Implicit, fundalul se extinde până la marginea exterioară a chenarului, dar acest comportament poate fi ajustat prin background-clip, care definește cât de mult se extinde fundalul în interiorul cutiei.

🔧 Exemplu background-clip

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

div {
  width: 60px;
  height: 60px;
  border: 10px dotted rgba(0, 0, 0, 0.5);
  outline: 5px solid red;
  padding: 20px;
  margin: 20px auto;
  background-size: 140px;
  background-position: center;
  background-image: url("imagini/background-clip.png");
  background-color: lime;
}

.default {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

Contur - Outline

Conturul unei cutii (outline) este ca o graniță, dar nu face parte din modelul cutiei. Se comportă asemănător chenarului (border), înconjoară cutia fără a-i schimba dimensiunea și este desenat în exteriorul acesteia, în interiorul marginii.

☞ Atenție când utilizați proprietatea outline. Este folosită de regulă din motive de accesibilitate, pentru a evidenția elemente precum link-uri atunci când utilizatorul face click pe ele sau navighează cu tasta Tab.

Conturul este prezent mereu pe toate laturile cutiei și are același aspect și grosime pe toate laturile.

Este diferit de chenar: este desenat în exteriorul acestuia și se poate suprapune peste alte elemente, fără a modifica dimensiunile cutiei.

Singurul impact asupra elementelor din jur este o eventuală suprapunere.

Dacă un element are contur, acesta ocupă același spațiu ca și atunci când nu ar avea contur.

Proprietățile outline sunt:

outline-width - specifică grosimea
outline-style - specifică stilul
outline-color - specifică culoarea
outline-offset - specifică spațiul dintre marginea/chenarul elementului și contur
outline - formă prescurtată pentru a seta simultan toate proprietățile

Tipuri de cutii CSS

Tot ce am discutat până acum se aplică cutiilor care reprezintă elemente de tip bloc. CSS are însă și alte tipuri de cutii, cu comportamente diferite.

Tipul de cutie aplicat unui element este specificat cu ajutorul proprietății display.

Principalele valori ale proprietății display sunt:

block - cutie stivuită peste altele, ocupă o linie separată și poate avea dimensiuni setate
inline - permite altor elemente să ocupe spațiul rămas pe linie; dimensiunile setate nu au efect, iar padding/margin/border afectează doar poziția textului
inline-block - combină caracteristici de inline și block: curge cu textul, dar acceptă dimensiuni și își păstrează integritatea
none - elementul nu este afișat

☞ Implicit, elementele de tip block au display: block;, iar cele inline au display: inline;. Acest lucru poate fi schimbat prin declararea unei alte valori.

🔧 Exemplu basic display properties

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
<p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
<p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
<p>

p {
  padding: 1em;
  border: 1px solid black;
  margin: 1em auto;
}

.inline {
  display: inline;
  background-color: #f0f0f0;
}

.block {
  display: block;
  background-color: #d0f0d0;
}

.inline-block {
  display: inline-block;
  background-color: #d0d0f0;
}

🧠 Quiz - CSS Modelul Cutiei

Depanarea CSS ➔