oujood.com

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

Dans cet article on explique ce qu'est la propriété CSS inline-size et comment l'utiliser pour définir la largeur d'un élément en ligne

chercher |

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éfautauto
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é.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57794112.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.




Voir aussi nos tutoriel :

Balise summary

Définit un en-tête visible d'un élément

fonction strtotime

Transforme un texte anglais en timestamp

fonction date_sunset

Retourne l’heure du coucher du soleil pour un jour et un endroit donnés