Accueil    CSS    Propriété width
 



style css width  Style CSS width

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété width détermine la largeur d'un élément html. Par défaut, si cette largeur n'est pas définie, la taille de l'élément dépendra de son type de rendu (style css display), de son conteneur, des éléments adjacents et de son contenu.
Par exemple, les éléments de type "block" prennent toute la largeur disponible par défaut alors que les éléments de type "inline" se limitent à la taille que prend leur contenu.

La propriété overflow permet de modifier le comportement du conteneur et par exemple d'afficher des barres de scroll lorsque le texte atteint une hauteur spécifiée.
La propriété white-space permet d'empêcher les retours à la ligne lorsque le texte atteint la largeur du conteneur et peut ainsi se combiner avec la propriété overflow.

Suivant le contenu que l'on souhaite afficher, la largeur peut varier et on souhaite alors éviter de donner une valeur fixe. Il est possible dans ce cas de définir les styles css min-width et max-width pour fixer une fourchette de valeurs.

La largeur "width" d'un élément n'inclue pas les tailles des propriétés border, padding et margin. L'article relatif au modèle des boites permet de bien comprendre les différentes dispositions s'appliquant autour d'un élément.



Propriétés pour le style width :




Propriété Définition Valeurs CSS
width Détermine la largeur d'un élément auto
valeur (px, em ...)
%
inherit
CSS 1


Exemple d'utilisation du style css width :




Affichages d'éléments block et inline :

<div style="border:solid 1px black; padding:5px;">
   Texte inclus dans un élément de type block sans largeur définie.
</div>

<span style="border:solid 1px black; padding:5px;">
   Texte inclus dans un élément de type inline sans largeur définie.
</span>

<div style="border:solid 1px black; padding:5px; width:300px; text-align:center;">
   Texte centré inclus dans un élément de largeur fixe.
</div>

utilisation des propriétés overflow et white-space avec un élément de taille fixe :

<div style="border:solid 1px black; padding:5px; width:400px; height:60px;
   overflow:auto;">
   Exemple de texte inclus dans un élément dont la hauteur et la largeur
   sont spécifiées :
   <br />width:400px, height: 80px.
   <br />Emploi de la propiété overflow:auto pour faire apparaître des barres de scroll.
</div>
<div style="border:solid 1px black; padding:5px; width:400px; height:60px; overflow:auto; white-space:nowrap">
   Exemple de texte inclus dans un élément dont la hauteur et la largeur sont spécifiées :
   <br />width:400px, height: 80px.
   <br />Emploi de la propiété overflow:auto pour faire apparaître des barres de scroll.
   <br />Emploi de la propiété white-space pour empêcher les retours à la ligne
   automatiques.
</div>


Texte inclus dans un élément de type block sans largeur définie.


Texte inclus dans un élément de type inline sans largeur définie.


Texte centré inclus dans un élément de largeur fixe.


utilisation des propriétés overflow et white-space avec un élément de taille fixe :

Exemple de texte inclus dans un élément dont la hauteur et la largeur sont spécifiées :
width:400px, height: 80px.
Emploi de la propiété overflow:auto pour faire apparaître des barres de scroll.

Exemple de texte inclus dans un élément dont la hauteur et la largeur sont spécifiées :
width:400px, height: 80px.
Emploi de la propiété overflow:auto pour faire apparaître des barres de scroll.
Emploi de la propiété white-space pour empêcher les retours à la ligne automatiques.