Accueil    CSS    Propriété max-width
 



style css max-width  Style CSS max-width

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


La propriété max-width détermine la largeur maximale que peut avoir un élément html lorsque la propriété width n'est pas définie. Si le contenu atteint cette limite, il est automatiquement placé sur la ligne suivante.
Comme pour les propriétés min-width, min-height et max-height, elle n'est pas applicable pour les éléments dont la propriété display est inline, table-row ou table-row-group (de nombreux éléments html sont inline par défaut comme les balises span ou label). Pour contourner ce problème il est possible d'employer la valorisation "display:inline-block".

La largeur peut varier significativement suivant le contenu de l'élément et pour éviter de définir une valeur fixe il est possible d'employer les styles css min-width et max-width pour fixer une fourchette de valeurs. La propriété overflow permet également de modifier le comportement du conteneur et par exemple d'afficher des barres de scroll lorsque le texte atteint une largeur spécifiée.

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 max-width :




Propriété Définition Valeurs CSS
max-width Détermine la largeur maximale que peut prendre un élément (non applicable au style display valant inline, table-row ou table-row-group) none
valeur (px, em ...)
%
inherit
CSS 2


Exemple d'utilisation du style css max-width :




Affichage d'un élément div en affichage inline-block avec largeurs minimales et maximales spécifiques :

<div style="display:inline-block; padding:5px; border:solid 1px black;
   width:400px; max-width:550px;">
   Elément avec une largeur maximale de 550 pixels.
   <br />La taille du conteneur s'adapte à son contenu s'il n'y a pas
   <br />de largeur minimale et que la largeur maximale n'est pas atteinte.
</div>

<div style="display:inline-block; padding:5px; border:solid 1px black;
   min-width:500px; max-width:550px;">
   Elément avec une largeur minimale de 500 pixels
   et largeur maximale de 550 pixels.
   <br />La taille du conteneur prend la largeur minimale
   <br />si le contenu n'atteind pas la taille minimale.
</div>

<div style="display:inline-block; padding:5px; border:solid 1px black; min-width:400px;
   max-width:500px;">
   Elément avec une largeur maximale de 500 pixels.
   <br />Le contenu dépasse cette fois la hauteur maximale fixée
   <br />
   <br />Le texte sort de la limite du conteneur lorsqu'il atteint
   la limite fixée à 500 pixels.
</div>


Affichage d'un élément div en affichage inline-block avec largeurs minimales et maximales spécifiques :

Elément de type block avec une largeur maximale de 550 pixels.
La taille du conteneur s'adapte à son contenu s'il n'y a pas
de largeur minimale et que la largeur maximale n'est pas atteinte.


Elément avec une largeur minimale de 450 pixels
et largeur maximale de 550 pixels.
La taille du conteneur prend la largeur minimale
si le contenu n'atteind pas la taille minimale.


Elément avec une largeur maximale de 500 pixels.
Le contenu dépasse cette fois la largeur maximale fixée

Le texte retourne automatiquement à la ligne lorsqu'il atteint la limite du conteneur fixée à 500 pixels.