Logische margin, padding en border

Fysieke afstandseigenschappen hebben logische tegenhangers die de blok- en inline-richtingen gebruiken:

• margin-top → margin-block-start
• margin-bottom → margin-block-end
• margin-left → margin-inline-start
• margin-right → margin-inline-end

Nieuwe verkorte eigenschappen omvatten beide blokzijden of beide inline-zijden:

Het klassieke centreerpatroon heeft nu een logisch equivalent:

Stel randen in op logische zijden:

Positioneringseigenschappen hebben ook logische tegenhangers:

• top → inset-block-start
• bottom → inset-block-end
• left → inset-inline-start
• right → inset-inline-end

De eigenschap inset is al een logische verkorte eigenschap voor alle vier de zijden. inset-block en inset-inline bieden controle over twee assen.

Breedte en hoogte hebben logische equivalenten:

Een zijbalk met een rand aan de startzijde:

De eigenschappen float en clear ondersteunen nu logische waarden:

text-align: start en text-align: end zijn logische alternatieven voor left en right. Ze passen zich automatisch aan de tekstrichting aan.

Geef bij nieuwe code de voorkeur aan logische eigenschappen. Pas bij bestaande code één component per keer aan. Prioriteitsvolgorde voor de migratie: afstanden (margin/padding), randen, afmetingen en positionering.

Logische eigenschappen voor margin, padding en randen gebruiken de richtingen block en inline in plaats van de fysieke boven-, rechts-, onder- en linkerkant. Verkorte eigenschappen zoals margin-block, padding-inline en inset-block omvatten beide zijden tegelijk. Geef bij alle nieuwe code voor afstanden de voorkeur aan logische eigenschappen voor automatische ondersteuning van RTL en verticale schrijfmodi.