Largeur et Hauteur en CSS – Définir width et height
Taille des blocs CSS et hauteur ligne

Définition des Largeur et Hauteur en CSS

Hauteur

Vous pouvez définir la hauteur d’un élément avec la propriété : height height: valeur;

Valeurs possibles:

1. auto
2. Valeurs en px
3. Pourcentage

Voir un exemple :

Voici un exemple avec 30px

Voir le code CSS :

.feuille {height:30px; border-width:1; }  

Voir le code dans l’élément

<span class="feuille">Voici un exemple avec 30px</span> 

Hauteur maximum

Vous pouvez définir la hauteur maximum d’une ligne avec la propriété : max-height max-height: valeur;

Valeurs possibles:

1. none (rien)
2. Valeurs en px
3. percentage

Hauteur minimum

Vous pouvez définir la hauteur minimum d’un élément avec la propriété : min-height min-height: valeur;

Valeurs possibles:

1. length
2. percentage

Largeur

Vous pouvez définir la largeur d’un élément avec la propriété : width width: valeur;

Valeurs possibles:

1. auto
2. Valeurs en px
3. pourcentage

Largeur Max

Vous pouvez définir la largeur maximum d’une ligne avec la propriété :max-width max-width: valeur;

Valeurs possibles:

1. none
2. Valeurs en px
3. pourcentage

Largeur Min

Vous pouvez définir la largeur minimum d’un élément avec la propriété : min-width min-width: valeur;

Valeurs possibles:

1. length
2. percentage

A savoir

Une hauteur plus petite que son contenu

Si le conteneur a une hauteur (height) plus petite que son contenu, sous Internet Explorer le contenu agrandit la hauteur, alors que Netscape / FireFox le contenu sort de la balise mais le conteneur est à la bonne taille.

Code CSS :

#conteneur{
								  width:200px;
								  height:50px;
								  border:1px solid #000000;
								}
								.contenu{
								  background-color:red;
								  margin:0 0 50px 0;
							}

Code HTML :

<div id="conteneur">
								<div class="contenu"> 
									Sous IE, j'agrandis mon parent
								</div>
														</div>

Dans le cas ou la hauteur du conteneur (parent) est véritablement plus petite que son contenu vous devez spécifier au parent la propriété overflow:hidden.

Dans le cas ou vous voulez que la hauteur du parent s’adapte au contenu, vous devez spécifier au parent la propriété height:auto Classification en CSS >>>