Largeur et Hauteur en CSS - Définir width et height
Taille des blocs CSS et hauteur ligne
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
Héritage : Il n'y pas de notion d'héritage pour les marges (voir notion d\'héritage sur ce lien)
Hauteur
Vous pouvez définir la hauteur d'un élément avec la propriété : heightheight: valeur;
Valeurs possibles:
- auto
- Valeurs en px
- 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 d'une ligne

line-height: valeur;
Valeurs possibles:
- normal
- nombre
- Valeurs en px
- pourcentage
Hauteur maxium
Vous pouvez définir la hauteur maximum d'une ligne avec la propriété : max-heightmax-height: valeur;
Valeurs possibles:
- none (rien)
- Valeurs en px
- percentage
Hauteur minimum
Vous pouvez définir la hauteur minimum d'un élément avec la propriété : min-heightmin-height: valeur;
Valeurs possibles:
- length
- percentage
Largeur
Vous pouvez définir la largeur d'un élément avec la propriété : widthwidth: valeur;
Valeurs possibles:
- auto
- Valeurs en px
- pourcentage
Largeur Max
Vous pouvez définir la largeur maximum d'une ligne avec la propriété :max-widthmax-width: valeur;
Valeurs possibles:
- none
- Valeurs en px
- pourcentage
Largeur Min
Vous pouvez définir la largeur minimum d'un élément avec la propriété : min-widthmin-width: valeur;
Valeurs possibles:
- length
- 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 >>>
Le CSS en 3 questions/réponses - en bref
🖥️ C'est quoi HTML et CSS ?
Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l'aspect graphique d'une page en HTML.🤔 Qu'est-ce que le CSS ?
CSS est l'acronyme de « Cascading Style Sheets » c'est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).📆 Différence entre CSS et CSS3 ?
CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.Voulez-vous laisser une note ou un commentaire ?
Donnez votre avis sur ce contenu :
Votes:
4.1 (100%)
78 votes