MP Web Studio
CSS100 din 100 disponibile
97 / 100

LECȚIA 97 DIN 100

Include padding-ul în dimensiunea elementelor

Aplică modelul border-box elementelor și pseudo-elementelor.

Sursă oficialăW3C CSS Sizing — box-sizingRevizuit: 2026-08-26
PASUL 1 · ÎNVAȚĂ

Cum funcționează

Cu box-sizing: border-box, dimensiunea declarată include padding-ul și bordura. O regulă comună pentru elemente și pseudo-elemente face calculele de layout mai previzibile.

Exemplu corect
*, *::before, *::after { box-sizing: border-box; }

Cardul de 100% nu crește peste container doar pentru că primește padding.

Greșeală frecventă
* { box-sizing: content-box; }

content-box adaugă padding-ul și bordura peste dimensiunea declarată și nu îndeplinește obiectivul exercițiului.

PASUL 2 · APLICĂ

Exercițiul tău

Pentru *, *::before și *::after, setează box-sizing: border-box într-o singură regulă.

PASUL 3 · CONSTRUIEȘTE

Scrie și vezi rezultatul

index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ

Ce trebuie să treacă

0%neverificat
  • Lista completă folosește border-box.
  • Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării

Lista de selectori aplică declarația tuturor elementelor și ambelor tipuri de pseudo-elemente generate.