📐

Layout si Spatiere

Dupa aceasta lectie vei sti sa organizezi elementele pe pagina si sa controlezi spatiul dintre ele!

🧪 INCEARCA 3 minute - experimenteaza!

Deschide editorul si adauga spatiu in jurul unui box.

🚀 Deschide OneCompiler HTML

🎯 Provocare (3 min):

Creeaza un div cu text:
<div style="background: lightblue; padding: 20px; margin: 30px; border: 3px solid blue;">Box cu spatiere!</div>
Modifica valorile si vezi diferenta!
Ce face padding? Ce face margin?

📚 INVATA Organizeaza-ti pagina

Box Model - Modelul Cutiei

Fiecare element e o cutie!

In CSS, fiecare element are 4 straturi: content, padding, border, margin.

MARGIN (spatiu exterior)

BORDER (chenar)

PADDING (spatiu interior)

CONTENT

Margin vs Padding

/* PADDING = spatiu IN INTERIORUL cutiei */
padding: 20px;          /* pe toate partile */
padding-top: 10px;      /* doar sus */
padding: 10px 20px;     /* sus/jos, stanga/dreapta */

/* MARGIN = spatiu IN AFARA cutiei */
margin: 20px;           /* pe toate partile */
margin-bottom: 30px;  /* doar jos */
margin: 0 auto;        /* centreaza orizontal! */

💡 Padding = spatiu intre content si border. Margin = spatiu intre element si vecini.

Border - Chenar

border: 2px solid black;   /* grosime, stil, culoare */
border: 3px dashed red;    /* linie intrerupta */
border: 1px dotted blue;   /* puncte */
border-radius: 10px;      /* colturi rotunjite */

Dimensiuni

Width si Height

width: 300px;      /* latime fixa */
width: 50%;        /* jumatate din parinte */
height: 200px;     /* inaltime fixa */
max-width: 100%;   /* nu depaseste parintele */

Flexbox - Aranjare Magica

display: flex

Flexbox e cel mai usor mod de a aranja elemente pe orizontala sau verticala!

.container {
  display: flex;              /* activeaza flexbox */
  justify-content: center;   /* centreaza orizontal */
  align-items: center;       /* centreaza vertical */
  gap: 20px;                  /* spatiu intre elemente */
}

/* Valori pentru justify-content: */
/* flex-start, flex-end, center, space-between, space-around */

justify-content

Aranjeaza pe axa principala (orizontal)

align-items

Aranjeaza pe axa secundara (vertical)

✅ VERIFICA Raspunde corect la 3 din 4

1. Ce e padding?

Spatiul din afara elementului

Spatiul din interiorul elementului, intre content si border

Chenarul elementului

2. Cum faci colturi rotunjite?

border: round;

corners: 10px;

border-radius: 10px;

3. Ce activeaza Flexbox?

display: flex;

flexbox: on;

layout: flex;

4. Ce face justify-content: center; in Flexbox?

Centreaza vertical

Centreaza orizontal

Schimba culoarea

⭐

Felicitari!

Ai terminat Lectia 5! Acum stii sa organizezi elementele pe pagina.

Ce ai invatat: margin, padding, border, width/height, display: flex, justify-content, align-items

Continua cu Lectia 6 (Ultima!) →