Tutorial CSS: Display și Dimensiuni

📦 Proprietatea Display

Proprietatea display determină cum se comportă un element în fluxul documentului și cum interacționează cu alte elemente.

1. Display: block

Caracteristici:

Ocupă toată lățimea disponibilă
Începe pe o linie nouă
Poate avea width și height setate
Exemple: <div>, <p>, <h1>-<h6>

                        .element {
                            display: block;
                        }
                    

Block 1

Block 2

Block 3

2. Display: inline

Caracteristici:

Ocupă doar spațiul necesar conținutului
Nu începe pe o linie nouă
NU poate avea width și height setate
Exemple: <span>, <a>, <strong>

                        .element {
                            display: inline;
                        }
                    

Inline 1

Inline 2

Inline 3

3. Display: inline-block

Caracteristici:

Combină caracteristicile inline și block
Stă pe aceeași linie cu alte elemente
POATE avea width și height setate
Respectă padding și margin pe toate direcțiile

                        .element {
                            display: inline-block;
                        }
                    

Inline-Block 1

Inline-Block 2

Inline-Block 3

4. Display: none

Caracteristici:

Elementul dispare complet din document
Nu ocupă spațiu
Util pentru ascunderea elementelor

                        .element {
                            display: none;
                        }
                    

Vizibil

📊 Tabel Comparativ

Proprietate	Block	Inline	Inline-Block
Linie nouă	✅ Da	❌ Nu	❌ Nu
Width/Height	✅ Funcționează	❌ Ignorat	✅ Funcționează
Padding/Margin vertical	✅ Complet	⚠️ Limitat	✅ Complet
Lățime implicită	100% din container	Conținut	Conținut

📐 Dimensiuni: Width, Height și Variante

Controlul dimensiunilor elementelor este esențial pentru layout-uri responsive și flexibile.

Width (Lățime)

Tipuri de valori:

Pixeli (px): Valoare fixă, nu se schimbă
Procente (%): Relativ la elementul părinte
Auto: Browser-ul calculează automat
Viewport (vw): Relativ la lățimea viewport-ului

Container părinte (100% lățime)

width: 50% (din părinte)

width: 200px (fix)

                        .element-procent { width: 50%; }
                        .element-fix { width: 200px; }
                        .element-auto { width: auto; }
                    

Height (Înălțime)

Particularități:

Height în procente funcționează doar dacă părintele are înălțime definită
Valoarea implicită este "auto" - se adaptează la conținut

Container părinte (height: 200px)

height: 50% (100px din părinte)

                        .parinte { height: 200px; }
                        .copil { height: 50%; /* 100px */ }
                    

Max-Width & Min-Width

Utilitate: Creează limite flexibile pentru responsive design

max-width: 500px
width: 100%
(Nu va depăși 500px chiar dacă părintele e mai mare)

min-width: 300px
width: 50%
(Nu va fi mai mic de 300px)

                        .element-responsive {
                            width: 100%;
                            max-width: 500px;  /* Limită superioară */
                            min-width: 300px;  /* Limită inferioară */
                        }
                    

Max-Height & Min-Height

Folosire comună: Controlul overflow-ului și menținerea proporțiilor

                        .container-scroll {
                            max-height: 400px;
                            overflow-y: auto;  /* Scroll când conținutul depășește */
                        }
                        
                        .element-proportional {
                            min-height: 100px;
                            height: auto;  /* Crește cu conținutul */
                        }
                    

⚠️ Notă importantă despre procente:

Când folosiți procente pentru width sau height, acestea sunt calculate relativ la elementul părinte:

Width %: Se calculează din lățimea părintelui
Height %: Funcționează doar dacă părintele are o înălțime definită
Padding/Margin %: Se calculează întotdeauna din LĂȚIMEA părintelui (chiar și pentru vertical!)

🎮 Demo Interactiv

Modifică proprietățile:

Display:

Width:

Height:

Container părinte

Element de test
Modifică proprietățile!

Element vecin

💡 Sfaturi Practice

Pentru Responsive Design:

Folosește max-width în loc de width fix pentru containere
Combină procente cu min/max pentru flexibilitate controlată
Viewport units (vw, vh) pentru elemente full-screen

Alegerea Display-ului Corect:

Block: Pentru secțiuni principale, containere
Inline: Pentru text și linkuri în paragraf
Inline-block: Pentru butoane, carduri în linie
Flex/Grid: Pentru layout-uri complexe (avansat)

Erori Comune de Evitat:

❌ Height în procente fără părinte cu înălțime definită
❌ Width/height pe elemente inline pure
❌ Uitarea de box-sizing: border-box
❌ Folosirea doar a valorilor fixe (px) pentru responsive