<length-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 de length-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 avec calc()

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 expression calc(). 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 des valeurs et unités CSS