margin-trim
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
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
noneExpérimental-
Les marges ne sont pas rognées par le conteneur.
blockExpérimental-
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-startExpérimental-
La marge du premier enfant de type bloc avec le bord du conteneur est rognée à zéro.
block-endExpérimental-
La marge du dernier enfant de type bloc avec le bord du conteneur est rognée à zéro.
inlineExpérimental-
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-startExpérimental-
La marge entre le bord du conteneur et le premier enfant en ligne est rognée à zéro.
inline-endExpérimental-
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é | Block containers and multi-column containers. S'applique aussi à ::first-letter. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| 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
| Specification |
|---|
| CSS Box Model Module Level 4 # margin-trim |
Compatibilité des navigateurs
Voir aussi
- La propriété
margin