Propriété de largeur CSS
Exemple
Définissez la largeur de trois éléments <div> :
div.a {
width: auto;
border: 1px
solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width:
50%;
border: 1px solid black;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La width
propriété définit la largeur d'un élément.
La largeur d'un élément n'inclut pas le rembourrage, les bordures ou les marges !
Remarque : Les propriétés min-width et
max-width remplacent la width
propriété.
Valeur par défaut: | auto |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS1 |
Syntaxe JavaScript : | objet .style.width="500px" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Syntaxe CSS
width: auto|value|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
auto | Default value. The browser calculates the width | |
length | Defines the width in px, cm, etc. Read about length units | |
% | Defines the width in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Définissez la largeur d'un élément <img> à l'aide d'une valeur en pourcentage :
img {
width: 50%;
}
Exemple
Définissez la largeur d'un élément <input type="text"> sur 100 pixels. Cependant, lorsqu'il obtient le focus, faites-le 250 pixels de large :
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
Pages connexes
Tutoriel CSS : Hauteur et largeur CSS
Tutoriel CSS : Modèle CSS Box
Référence CSS : propriété hauteur
Référence HTML DOM : propriété width