width

  • Raccourci de la révision : CSS/width
  • Titre de la révision : width
  • ID de la révision : 176465
  • Créé :
  • Créateur : Fredchat
  • Version actuelle ? Non
  • Commentaire Document à relire

Contenu de la révision

{{template.CSSRef()}} {{wiki.template('Traduction_à_relire')}}

Résumé

La propriété width est utilisée pour définir la largeur d'un élément donné.

  • Valeur initiale : auto
  • S'applique à : éléments de type bloc et éléments remplacés
  • Héritée : non
  • Pourcentages : se réfèrent à la largeur du bloc contenant
  • Média : Visuel

Syntaxe

 width: [ <length> || <percentage> ] auto | inherit

Valeurs

  • length : L'unité peut être px (pixel), cm (centimètre), in (pouce, inch en anglais)
  • percentage : % spécifié par rapport à la fenêtre du navigateur.
  • auto : La navigateur calculera et sélectionnera une largeur pour l'élément spécifié.

Exemples

{{template.CSSRefExampleLink("width")}}

table { width: 100%; }

img { width: 200px; }

form { width: auto; }

Notes

Spécifications

Compatibilité des navigateurs

Navigateur Version minimale
Internet Explorer 4
Netscape 4
Opera 3.5

Voir également

Modèle de boîte, {{template.Cssxref("height")}}, {{template.Cssxref("-moz-box-sizing")}}

Interwiki Languages Links

{{ wiki.languages( { "en": "en/CSS/width" } ) }}

Source de la révision

<p> 
{{template.CSSRef()}}
{{wiki.template('Traduction_à_relire')}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>La propriété <code>width</code> est utilisée pour définir la largeur d'un élément donné.
</p>
<ul><li> Valeur initiale : auto
</li><li> S'applique à : éléments de type bloc et éléments remplacés
</li><li> Héritée : non
</li><li> Pourcentages : se réfèrent à la largeur du bloc contenant
</li><li> Média : <a href="fr/CSS/M%c3%a9dia/Visuel">Visuel</a>
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval"> width: [ &lt;length&gt; || &lt;percentage&gt; ] auto | inherit
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<ul><li> <b>length</b> : L'unité peut être px (pixel), cm (centimètre), in (pouce, inch en anglais)
</li><li> <b>percentage</b> : % spécifié par rapport à la fenêtre du navigateur.
</li><li> <b>auto</b> : La navigateur calculera et sélectionnera une largeur pour l'élément spécifié.
</li></ul>
<h3 name="Exemples"> Exemples </h3>
<p>{{template.CSSRefExampleLink("width")}}
</p>
<pre class="eval">table { width: 100%; }

img { width: 200px; }

form { width: auto; }
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css1/#width">CSS 1 (fr)</a>
</li><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/visudet.html#the-width-property">CSS 2 (fr)</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">CSS 2.1 (en)</a>
</li></ul>
<h3 name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Navigateur</th>
    <th>Version minimale</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p><a href="fr/CSS/Mod%c3%a8le_de_bo%c3%aete">Modèle de boîte</a>, {{template.Cssxref("height")}}, {{template.Cssxref("-moz-box-sizing")}}
</p><p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/width" } ) }}
Revenir à cette révision