.content { max-width: 720px; margin-inline: auto; padding-inline: 24px; }Containerul are lățime limitată, este centrat și păstrează spațiu pe ambele margini inline.
LECȚIA 95 DIN 100
Centrează conținutul cu proprietăți logice
Creează un container care se adaptează direcției de scriere.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Proprietățile logice folosesc axele inline și block, nu laturi fizice fixe. margin-inline și padding-inline se adaptează automat direcției textului.
.content { margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }Proprietățile fizice pot funcționa aici, dar dublează declarațiile și nu exersează axa logică.
PASUL 2 · APLICĂ
Exercițiul tău
Setează max-width 720px, margin-inline auto și padding-inline 24px pentru .content.
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
- ○Containerul are max-width 720px.
- ○Marginile inline sunt automate.
- ○Padding-ul inline este 24px.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
max-width limitează linia, iar cele două proprietăți logice controlează spațiul pe axa inline.