Pri delu z CSS smo navajeni uporabljati padding ali pa posamezne padding-top, padding-left, padding-right in padding-bottom. Te lastnosti so vezane na fizične smeri odmika (levo/desno/gor/dol).
Sodobni CSS pa uvaja logične lastnosti, kot sta padding-inline in padding-block, ki se prilagajajo glede na smer pisanja (npr. levo-desno ali desno-levo).
Kaj pomeni inline in block?
Namesto fizičnih smeri uporabljamo logične:
- inline – smer besedila (levo ↔ desno)
- block – smer blokov (zgoraj ↕ spodaj)
Primer kode
//Nastavi padding na levi in desni strani elementa (glede na smer pisanja)
.box {
padding-inline: 20px;
}
//Nastavi padding na zgornji in spodnji strani
.box {
padding-block: 10px;
}Zakaj uporabljati logične lastnosti?
Glavna prednost je prilagodljivost. Če imaš večjezično stran (npr. arabščina – desno → levo), se bo layout sam pravilno obrnil.
Kdaj jih uporabiti:
- večjezične strani (LTR + RTL)
- design sistemi
- komponente, ki se ponovno uporabljajo
- modern CSS pristopi, manj kode
Glede podpore ni težav, obe lastnosti, padding-inline in padding-block sta dobro podprta v brskalnikih, razen IE, ki pa izginja. Če ciljamo stare brskalnike je bolje ostati pri klasičnih lastnostih paddinga. Enako velja, če potrebujemo popoln nadzor nad specifično stranjo (npr. samo left).
