Capitol gratuit

Box Model - temelia layout-ului

Fiecare element HTML este o cutie (box) cu patru straturi concentrice. Înțelegerea box model-ului este fundamentală - fără ea, nu puteți controla dimensiun...

Introducere

Fiecare element HTML este o cutie (box) cu patru straturi concentrice. Înțelegerea box model-ului este fundamentală - fără ea, nu puteți controla dimensiunile și spațierea elementelor.

Cele 4 straturi ale box model

Content - Conținutul propriu-zis (text, imagine). Dimensionat de width și height
Padding - Spațiul interior, între conținut și border. Fundal vizibil
Border - Chenarul vizibil al cutiei
Margin - Spațiul exterior, între cutie și alte elemente. Transparent
.box {
/* Content */
width: 300px;
height: 200px;

/* Padding - spațiu interior */
padding: 20px;              /* Toate laturile */
padding: 20px 40px;         /* Vertical Orizontal */
padding: 10px 20px 30px 40px; /* Top Right Bottom Left (ceas) */

/* Border */
border: 2px solid #ccac65;

/* Margin - spațiu exterior */
margin: 24px;
margin: 0 auto;             /* Centrare orizontală */
}

box-sizing: border-box

Implicit (content-box), width/height se referă DOAR la conținut. Padding-ul și border-ul se adaugă pe deasupra, făcând elementul mai mare decât valoarea setată.

content-box: width total = width + padding-left + padding-right + border-left + border-right

border-box include padding-ul și border-ul ÎN width/height. Aceasta este comportarea logică:

border-box: width total = width (padding și border sunt incluse)
/* ÎNTOTDEAUNA adăugați aceasta la începutul CSS-ului */
*, *::before, *::after {
box-sizing: border-box;
}

/* Exemplu diferență */
.content-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 2px solid gold;
/* Lățime TOTALĂ: 300 + 40 + 4 = 344px */
}

.border-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 2px solid gold;
/* Lățime TOTALĂ: 300px (padding și border sunt incluse) */
}
⚠️ Important: Declarați box-sizing: border-box pe * la începutul fiecărui proiect. Este prima regulă din orice CSS reset modern. Fără ea, calculele de dimensiuni devin confuze.

Margin Collapsing

Marginile verticale ale elementelor adiacente se „prăbușesc" (collapse) - nu se adună, ci se aplică doar cea mai mare:

/* Margin collapsing */
.heading { margin-bottom: 30px; }
.paragraph { margin-top: 20px; }
/* Spațiul între ele: 30px (nu 50px!) - cea mai mare câștigă */

/* Cum se evită */
/* Varianta 1: Folosiți margin doar într-o direcție */
.heading { margin-bottom: 30px; }
.paragraph { margin-top: 0; }

/* Varianta 2: Folosiți padding pe părinte */
/* Varianta 3: Folosiți gap cu Flexbox/Grid */
💡 Best practice: Folosiți margin doar într-o singură direcție (de preferință margin-bottom) pentru a evita confuzia creată de margin collapsing. Sau folosiți gap cu Flexbox/Grid care nu are această problemă.

Proprietatea display

Proprietatea display controlează cum se comportă un element în layout:

Valoare Comportament Exemple HTML
block Ocupă toată lățimea, nou rând <div>, <p>, <h1>, <section>
inline Pe același rând, width/height ignorate <span>, <a>, <strong>
inline-block Pe același rând, acceptă width/height <img>, <button>, <input>
none Invizibil, eliminat din layout Elemente ascunse
flex Container Flexbox Layout-uri unidimensionale
grid Container Grid Layout-uri bidimensionale

CSS Reset modern

Browserele au stiluri implicite diferite. Un CSS reset/normalize asigură consistență:

/* CSS Reset modern minim */
*, *::before, *::after {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
}

html {
font-size: 100%;              /* Respectă preferința utilizatorului */
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

body {
min-height: 100dvh;           /* Înălțime minimă full-screen */
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
display: block;
max-width: 100%;              /* Imagini responsive */
}

input, button, textarea, select {
font: inherit;                /* Moștenesc fontul părintelui */
}

p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;    /* Previne depășirea containerului */
}

h1, h2, h3, h4, h5, h6 {
text-wrap: balance;           /* Echilibrare rânduri titluri */
}
🎯 Recomandare: Folosiți acest CSS reset la începutul fiecărui proiect. Este minimalist dar acoperă cele mai comune probleme de inconsistență între browsere.

Continuați cu restul cursului

Acesta este capitolul 3 din cele 20 ale cursului, cu 6 lecții din 110. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.

Cumpărați cursul la 70 €