Dimension CSS (Dimensions)

Attributs de dimension CSS, utilisés pour contrôler la hauteur et la largeur des éléments.

Attributs de dimension CSS

Ce CSS fournit plusieurs attributs, tels que width, height, max-width et max-height, vous permettent de définir la taille du Box (boîte). La section suivante présentera comment utiliser ces attributs pour créer de meilleures mises en page de site web.

Largeur (Width) et Hauteur (Height) des attributs

Les attributs width et height définissent la largeur et la hauteur de la zone de contenu d'un élément. Cette largeur et cette hauteur ne comprennent pas les rembourrages, les bordures ou les marges. Voir égalementModèle de boîte CSS, 　 pour comprendre comment calculer les largeurs et hauteurs effectives.

Les attributs width et height peuvent utiliser des valeurs de longueur (comme px, pt, em, etc.), unePourcentageou la valeur par défaut auto. Les valeurs de longueur négatives ne sont pas autorisées.

div　{
　　　　width:　300px;
　　　　height:　200px;
}

Cette règle de style assigne300 pixels de largeur fixe et200 pixels de hauteur sont attribués à<div>de l'élément.

max-L'attribut height : hauteur maximale

max-L'attribut height permet de spécifier la hauteur maximale de contenu de la boîte. Cette hauteur maximale ne comprend pas les rembourrages, les bordures ou les marges.

max-L'attribut height, même si l'attribut height est réglé sur une valeur plus grande, l'élément appliqué ne dépassera pas la valeur spécifiée. Par exemple, si l'height est réglé sur200px et de max-height est réglé sur100px, la hauteur réelle de l'élément est100px.

div　{
　　　　height:　200px;
　　　　max-height:　100px;
}

Le max-L'attribut height est généralement utilisé avec le min-L'attribut height utilisé conjointement pour déterminer la plage de hauteur de l'élément.

min-L'attribut height : hauteur minimale

min-L'attribut height permet de spécifier la hauteur minimale de contenu d'un bloc. Cette hauteur minimale ne comprend pas les rembourrages, les bordures ou les marges.

min-L'élément appliquant height ne sera jamais plus petit que la hauteur minimale spécifiée. Par exemple, si height est réglé sur200px et min-height est réglé sur300px, alors la hauteur réelle de l'élément sera300px。

div　{
　　　　height:　200px;
　　　　min-height:　300px;
}

Le min-L'attribut height est généralement utilisé avec ce max-L'attribut height utilisé conjointement pour contrôler la gamme de hauteur de l'élément.

max-Attribut Largeur maximale width

Le max-L'attribut width permet de spécifier la largeur maximale de contenu d'un bloc. Cette largeur maximale ne comprend pas le rembourrage, les bordures ou les marges.

max-L'attribut width, même si l'attribut width est réglé sur une valeur plus grande, l'élément appliquant a ne sera jamais plus large que la valeur spécifiée. Par exemple, si le width est réglé sur300px, max-width est réglé sur200px, alors la largeur réelle de l'élément sera200px。

div　{
　　　　width:　300px;
　　　　max-width:　200px;
}

Le max-L'attribut width est généralement utilisé avec ce min-L'attribut width utilisé conjointement pour produire des informations sur la gamme de largeur de l'élément.

min-Attribut Largeur minimale width

Le min-L'attribut width permet de spécifier la largeur minimale de contenu d'un bloc. Cette largeur minimale ne comprend pas le rembourrage, les bordures ou les marges.

min-L'élément appliquant width ne sera jamais plus étroit que la largeur minimale spécifiée. Par exemple, si le width est réglé sur300px， min-width est réglé sur400px， alors la largeur réelle de l'élément sera400px。

div　{
　　　　width:　300px;
　　　　min-width:　400px;
}

Le min-L'attribut width est généralement utilisé avec ce max-L'attribut width utilisé conjointement pour produire des informations sur la gamme de largeur de l'élément.