Propriété css inline-size

Définition et utilisation da la propriété css inline-size

La propriété CSS inline-size définit la largeur d'un élément en ligne, c'est-à-dire la largeur de l'élément sur une ligne de texte. Elle peut être utilisée pour définir la largeur d'un élément de type inline, inline-block ou inline-table. La Syntaxe CSS
Voici la syntaxe générale de la propriété CSS inline-size :

element {
  inline-size: value;
}

Element est l'élément HTML sur lequel vous souhaitez appliquer la propriété inline-size. Value est la valeur de la largeur que vous souhaitez définir pour l'élément.

Voici quelques exemples d'utilisation de la propriété inline-size avec différentes valeurs :

inline-size: 200px; : définit une largeur de 200 pixels pour l'élément
inline-size: 50%; : définit une largeur de 50% de la largeur de l'élément parent
inline-size: auto; : utilise la largeur de l'élément en fonction de son contenu
inline-size: fit-content; : utilise la largeur minimale nécessaire pour contenir le contenu de l'élément

Notez que la propriété inline-size ne fonctionne que si l'élément est affiché en ligne. Si l'élément est affiché en tant qu'élément de bloc, vous devrez utiliser la propriété width au lieu de inline-size.

Valeurs par défaut	auto
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.inlineSize="250px";

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Explorateur
Verssion	57	79	41	12.1	44

Voici un exemple HTML et CSS qui utilise la propriété inline-size pour définir la largeur d'un élément en ligne :

Exemple Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
  <title>La propriété css inline-size</title>
    <style>
      .container {
	  width: 600px;
	}

	.mon-element {
	  display: inline-block;
	  inline-size: 200px;
	  border: 1px solid black;
	}
    </style>
  </head>
  <body>
   <div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="mon-element">Je suis un élément avec une largeur de 200 pixels grâce à la propriété inline-size.</span> Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Et malesuada fames ac turpis egestas sed tempus urna et. 
</div>

  </body>
</html>

Dans cet exemple, l'élément span avec la classe mon-element a une largeur de 200 pixels grâce à la propriété inline-size. Notez que l'élément parent, le div avec la classe container, a une largeur de 600 pixels. Cela signifie que l'élément p s'étendra sur environ 40% de la largeur de son parent.

Astuces et conseils pour utiliser la propriété inline-size

Voici quelques astuces et conseils pour utiliser efficacement la propriété CSS inline-size dans vos styles CSS :

1- Utilisez la propriété inline-size pour contrôler la largeur d'un élément en ligne lorsque vous souhaitez que l'élément ait une largeur différente de celle de l'élément parent.
2- Si vous utilisez la propriété inline-size avec une valeur en pourcentage, assurez-vous que l'élément parent a une largeur définie.
3- Évitez d'utiliser la propriété inline-size avec une valeur en pixels si vous souhaitez que votre site soit responsive et s'adapte aux différentes tailles d'écran. Utilisez plutôt des valeurs en pourcentage ou la valeur auto.
4- N'oubliez pas que la propriété inline-size ne fonctionne que sur les éléments affichés en ligne. Si vous souhaitez définir la largeur d'un élément de bloc, utilisez la propriété width au lieu de inline-size.

Liste des propriétés css

Utiliser la propriété CSS inline-size pour définir la largeur d'un élément en ligne

Les propriétés CSS par ordre alphabétique

Définition et utilisation da la propriété css inline-size

Prise en charge de la propriété dans les navigateurs

Astuces et conseils pour utiliser la propriété inline-size

La méthode secrète likes sans fin sur Facebook