CSS Débutant .com

Défintion des Largeur et Hauteur en CSS

Hauteur, largeur, le css vous permet de définir ses paramètres importants.

• height : Hauteur
• line-height: Hauteur d'une ligne
• max-height :Hauteur maxium
• min-height Hauteur minimum
• width : Largeur
• max-width : Largeur maxium
• min-width : minimum
• A savoir

Héritage

Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien)

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

Valeurs possibles:

• auto
• Valeurs en px
• pourcentage

Voir un exemple

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 d'une ligne

Vous pouvez définir la hauteur d'une ligne avec la propriété : line-height
line-height: valeur;

Valeurs possibles:

• normal
• nombre
• Valeurs en px
• pourcentage

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

Valeurs possibles:

• none (rien)
• Valeurs en px
• percentage

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

Valeurs possibles:

• length
• percentage

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

Valeurs possibles:

• auto
• Valeurs en px
• pourcentage

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

Valeurs possibles:

• none
• Valeurs en px
• pourcentage

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

Valeurs possibles:

• length
• percentage

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 où 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 où vous voulez que la hauteur du parent s'adapte au contenu, vous devez spécifier au parent la propriété height:auto