Informatică Dezvoltare web
CSS Box Model explicatie
CSS Box Model este modelul care definește cum sunt organizate și dimensionate elementele HTML într-o pagină web. Fiecare element este considerat o cutie dreptunghiulară cu patru componente: conținut, padding, border și margin. Acest model controlează spațierea, dimensiunile și poziționarea elementelor.
Componentele Box Model-ului
- Conținut (Content) Zona centrală care afișează textul, imaginile sau alte elemente. Dimensiunea ei se setează cu proprietățile width și height.
- Padding Spațiul interior dintre conținut și border. Se controlează cu proprietatea padding, de exemplu: padding: 10px;
- Border Linia care înconjoară padding-ul. Se setează cu proprietatea border, de exemplu: border: 2px solid black;
- Margin Spațiul exterior dintre border și alte elemente. Se controlează cu proprietatea margin, de exemplu: margin: 20px;
Cum se calculează dimensiunea totală a unui element
- 1 Pasul 1: Determină lățimea totală Lățime totală = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right. Exemplu: width: 100px, padding: 10px, border: 2px, margin: 5px dă 100 + 20 + 4 + 10 = 134px.
- 2 Pasul 2: Determină înălțimea totală Înălțime totală = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom. Exemplu: height: 50px, padding: 10px, border: 2px, margin: 5px dă 50 + 20 + 4 + 10 = 84px.
- 3 Pasul 3: Folosește box-sizing pentru control Proprietatea box-sizing: border-box; include padding și border în width și height, simplificând calculele. Exemplu: div { box-sizing: border-box; width: 100px; padding: 10px; } face lățimea totală 100px, nu 120px.
Folosește DevTools din browser pentru a inspecta Box Model-ul elementelor și a ajusta rapid valorile.