Proprietățile Logice în CSS înlocuiesc vechile proprietăți bazate pe direcții fizice absolute (top, right, bottom, left) cu dimensiuni relative la fluxul de scriere al textului: inline (pe direcția rândului de text) și block (pe direcția verticală de stivuire a paragrafelor).
Această abordare este esențială pentru interfețele moderne care suportă internaționalizare (inclusiv limbi cu scriere de la dreapta la stânga, cum sunt araba sau ebraica – RTL), dar aduce un cod mult mai scurt și mai elegant chiar și pentru site-urile standard în limba română.
Comparație directă: Proprietăți Fizice vs. Proprietăți Logice
/* ABORDAREA VECHE (Fizică): */
.cutie-veche {
margin-left: auto;
margin-right: auto; /* Centrare orizontală */
padding-top: 24px;
padding-bottom: 24px;
border-left: 4px solid #3858e9;
top: 0; left: 0; right: 0; bottom: 0; /* Umplere ecran */
}
/* ABORDAREA MODERNĂ (Proprietăți Logice): */
.cutie-moderna {
margin-inline: auto; /* Înlocuiește margin-left + margin-right */
padding-block: 24px; /* Înlocuiește padding-top + padding-bottom */
border-inline-start: 4px solid #3858e9; /* Se mută automat pe dreapta pe pagini RTL! */
inset: 0; /* Înlocuiește top: 0; right: 0; bottom: 0; left: 0; */
}Tabel de Corespondență Rapidă
| Proprietate Veche (Fizică) | Echivalent Modern (Proprietate Logică) |
|---|---|
margin-left + margin-right |
margin-inline |
padding-top + padding-bottom |
padding-block |
width / height |
inline-size / block-size |
top, right, bottom, left |
inset (sau inset-inline / inset-block) |