Letype de donnéesCSS<length-percentage> représente une valeur qui peut être une valeur de type<length> ou une valeur de type<percentage>.

Syntaxe

Se référer à la documentation des types<length> et<percentage> pour plus de détails sur les syntaxes possibles pour chacun de ces types.

Syntaxe formelle

<length-percentage> =
<length>|
<percentage>

Exemples

Exemples delength-percentage

Cet exemple montre plusieurs propriétés qui utilisent des valeurs<length-percentage>.

HTML

<p>  Vous pouvez utiliser des pourcentages et des longueurs à de nombreux endroits.</p>

CSS

p {  /* exemples de length-percentage */  width: 75%;  height: 200px;  margin: 3rem;  padding: 1%;  border-radius: 10px 10%;  font-size: 250%;  line-height: 1.5em;  /* exemples de longueurs */  text-shadow: 1px 1px 1px red;  border: 5px solid red;  letter-spacing: 3px;  /* exemple de pourcentage */  text-size-adjust: 20%;}

Résultat

Utilisation aveccalc()

Lorsqu'une valeur de type<length-percentage> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expressioncalc(). Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriétéwidth :

width: 200px;width: 20%;width: calc(100% - 200px);

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de donnée<percentage>
• Le type de donnée<length>
• Le module desvaleurs et unités CSS