Propriété CSS margin-trim
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Want more browser support for this feature? Tell us why.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété CSS margin-trim permet à un conteneur de rogner les marges de ses éléments enfants qui sont adjacentes aux bords du conteneur.
Syntaxe
margin-trim: none;
margin-trim: block;
margin-trim: block-start;
margin-trim: block-end;
margin-trim: inline;
margin-trim: inline-start;
margin-trim: inline-end;
/* Valeurs globales */
margin-trim: inherit;
margin-trim: initial;
margin-trim: revert;
margin-trim: revert-layer;
margin-trim: unset;
Valeurs
none-
Les marges ne sont pas rognées par le conteneur.
block-
Les marges des enfants de type bloc qui sont adjacentes aux bords du conteneur sont rognées à zéro sans affecter les marges du conteneur lui-même.
block-start-
La marge du premier enfant de type bloc avec le bord du conteneur est rognée à zéro.
block-end-
La marge du dernier enfant de type bloc avec le bord du conteneur est rognée à zéro.
inline-
Les marges des enfants en ligne qui sont adjacentes aux bords du conteneur sont rognées à zéro, sans affecter l'espacement au début et à la fin de la ligne.
inline-start-
La marge entre le bord du conteneur et le premier enfant en ligne est rognée à zéro.
inline-end-
La marge entre le bord du conteneur et le dernier enfant en ligne est rognée à zéro.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | Conteneurs de type bloc et conteneurs multi-colonnes. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
margin-trim =
none |
[ block || inline ] |
[ block-start || inline-start || block-end || inline-end ]
Exemples
Utilisation simple
Une fois la prise en charge de cette propriété implémentée, elle fonctionnera probablement ainsi :
Lorsque vous avez un conteneur avec des enfants en ligne et que vous souhaitez mettre une marge entre chaque enfant sans que cela n'interfère avec l'espacement à la fin de la ligne, vous pourriez faire quelque chose comme ceci :
article {
background-color: red;
margin: 20px;
padding: 20px;
display: inline-block;
}
article > span {
background-color: black;
color: white;
text-align: center;
padding: 10px;
margin-right: 20px;
margin-left: 30px;
}
Le problème ici est que vous vous retrouveriez avec 20px de trop à droite de la ligne, donc vous pourriez faire ceci pour corriger :
span:last-child {
margin-right: 0;
margin-left: 0;
}
C'est pénible d'avoir à écrire une autre règle pour obtenir ce résultat, et ce n'est pas très flexible. À la place, margin-trim pourrait corriger cela :
article {
margin-trim: inline-end;
/* … */
}
De même, pour supprimer la marge gauche avec le bord du conteneur :
article {
margin-trim: inline-start;
/* … */
}
Spécifications
| Spécification |
|---|
| CSS Box Model Module Level 4 # margin-trim |
Compatibilité des navigateurs
Voir aussi
- La propriété
margin