Apprends les propriétés logiques CSS qui s'adaptent aux différents modes d'écriture et directions de texte, en remplaçant les propriétés physiques comme margin-left par des alternatives relatives au flux comme margin-inline-start.
Les propriétés CSS traditionnelles comme margin-left, padding-right, width et height sont physiques — elles font toujours référence à la même direction physique sur l'écran, quelle que soit la langue ou le mode d'écriture.
Les propriétés logiques remplacent les directions physiques par des directions relatives au flux :
| Physique | Logique (écriture horizontale) | Signification |
|---|---|---|
margin-left / margin-right | margin-inline-start / margin-inline-end | Le long de l'axe en ligne (texte) |
margin-top / margin-bottom | margin-block-start / margin-block-end | Le long de l'axe de bloc (empilement) |
padding-left / padding-right | padding-inline-start / padding-inline-end | Espacement interne sur l'axe en ligne |
width | inline-size | Taille le long de l'axe en ligne |
height | block-size | Taille le long de l'axe de bloc |
Dans une langue de gauche à droite (comme le français), margin-inline-start équivaut à margin-left. Mais dans une langue de droite à gauche (comme l'arabe), elle devient automatiquement margin-right. Cela rend ton CSS prêt pour l'internationalisation sans dupliquer les règles.
Les propriétés logiques ont des raccourcis pratiques :
margin-inline — Définit à la fois margin-inline-start et margin-inline-end. Avec deux valeurs, la première est le début et la seconde est la fin.
.box { margin-inline: 20px 10px; }margin-block — Définit à la fois margin-block-start et margin-block-end.
.box { margin-block: 16px; } /* équivalent à haut et bas */padding-inline et padding-block — Même principe pour l'espacement interne.
inset-inline et inset-block — Équivalents logiques de left/right et top/bottom pour les éléments positionnés.
border-inline et border-block — Définissent les bordures sur les axes logiques.
La propriété writing-mode modifie l'orientation des axes de bloc et en ligne :
horizontal-tb — Par défaut. L'axe en ligne est horizontal (gauche à droite), l'axe de bloc est vertical (haut en bas).vertical-rl — L'axe en ligne est vertical (haut en bas), l'axe de bloc est horizontal (droite à gauche).vertical-lr — L'axe en ligne est vertical, l'axe de bloc est horizontal (gauche à droite).Les propriétés logiques s'adaptent automatiquement à n'importe quel mode d'écriture.
<style>
.card {
/* Dimensionnement logique */
inline-size: 300px;
block-size: auto;
/* Espacement interne logique */
padding-block: 16px;
padding-inline: 24px;
/* Marge logique — auto centre horizontalement */
margin-inline: auto;
margin-block: 20px;
/* Bordure logique */
border-inline-start: 4px solid blue;
background-color: #f8f8f8;
}
.card p {
/* Marge logique pour l'espacement des paragraphes */
margin-block-end: 12px;
}
</style>
<div class="card">
<h3>Propriétés logiques</h3>
<p>Cette carte utilise des propriétés logiques partout.</p>
<p>Elle s'adaptera si la direction d'écriture change.</p>
</div>Dans une langue de droite à gauche (RTL), à quelle direction physique correspond `margin-inline-start` ?