`Margin-trim` - Propriété CSS

margin-trim

Résumé des caractéristiques de la propriété `margin-trim`

Description rapide

Définit la gestion des marges successives au sein d'un même container.

Statut

Problèmes de compatibilité ⚠

S'applique à

Conteneurs du type bloc, conteneurs colonnes multiples, conteneurs grille et conteneurs flex-box.

Utilisable sur

HTML

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété margin-trim passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Modèle de blocs

Références (W3C)

CSS Box Model Module Level 4

Statut du document: WD (document de travail)

Schéma de la syntaxe de `margin-trim`.

Schéma syntaxique de la propriété margin-trim.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG

Description de la propriété `margin-trim`.

La définition de cette propriété n'est pas encore stabilisée par le W3C. Les navigateurs ne la traitent pas encore. Il est trop tôt pour l'utiliser.

margin-trim définit où doivent apparaître les marges dans un conteneur. Souvent les marges sont désirées entre les éléments frères du conteneur, mais pas avant le premier élément, ni après le dernier, ces deux marges pouvant être réalisée par un padding du conteneur.

Remarque : il y a des particularités à connaître au sujet des marges successives. Voir les explications sur la fusion des marges sur la page de la propriété margin.

Prise en charge de la langue.

Certaines langues ont des modes d'écriture différents de celui des langues latines. Par exemple, les langues arables s'écrivent de droite à gauche, puis du haut vers le bas, les langues CJK s'écrivent du haut vers le bas, puis de la droite vers la gauche, etc.

La propriété margin-trim étant récente, elle prend en charge de façon native le mode d'écriture. En effet, ses valeurs sont construites à partir des mots block et inline, qui sont des valeurs logiques.

La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.

Valeurs pour `margin-trim`.

margin-trim: none;

Aucune marge n'est supprimée par le conteneur. Cependant la fusion des marges reste active, en particulier avec les marges intérieures du conteneur.
margin-trim: block-start; margin-trim: block-end; margin-trim: inline-start; margin-trim: inline-end;

Block-start : la marge avant le premier élément enfant est ramenée à 0.
Block-end : la marge après le dernier élément enfant est ramenée à 0.
Inline-start : la marge entre le conteneur et le premier enfant inline est ramenée à 0.
Inline-end : la marge entre le conteneur et le dernier enfant inline este ramené à 0.

margin-trim:block-start;

margin-trim:block-end;

margin-trim:inline-start;

margin-trim:inline-end;
margin-trim: block; margin-trim: inline;

Ces valeur sont équivalentes à block-start et block-end pour block,
et à inline-start et inline-end pour inline.

margin-trim:block;

margin-trim:inline;
margin-trim: initial; (none) margin-trim: inherit; margin-trim: revert; margin-trim: revertLayer; margin-trim: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété `margin-trim`.

Pour l'instant, la propriété margin-trim n'est pas reconnue par les navigateurs, sauf Safari . Le simulateur ne sera donc pas opérationnel.

Mode d'écriture :

Ceci est le premier paragraphe

Ceci est le deuxième paragraphe

Ceci est le troisième paragraphe

Compatibilité des navigateurs avec `margin-trim`.

La propriété CSS margin-trim est encore très peu reconnue par les navigateurs. Il est donc trop tôt pour l'utiliser dans vos feuilles de styles.

Colonne 1

Propriété
margin-trim

Estimation de la prise en charge globale.

15%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `margin-trim`.

La propriété margin-trim est assez récente.

Module CSS - Modèle de blocs - Niveau 4

Définition initiale de la propriété margin-trim.

21 Avril 2020
Document de travail.

Voir aussi, à propos des marges.

Les marges sont une caractéristiques importantes du box-modèle de CSS. Le module CSS Box Model Module regroupe toutes les propriétés en rapport, dont margin-trim. Voici les autres propriétés qui figurent dans ce module :