Dans ce chapitre, nous allons voir comment gérer la taille des balises html. Hauteur, largeur, dimensions maximales et minimales ; mais aussi les marges entre elles et les marges internes.
Hauteur et largeur
La largeur d'une balise de type bloc peut être défini avec la propriété css width. Par exemple, je vais ici donner une largeur de 250px à ma div :
div{
width: 250px;
}
La hauteur est défini par la proporiété height :
div{
width: 250px;
height: 200px;
}
Il est possible d'utiliser plusieurs unités :
- Les pixels : ils permettent de définir une valeur fixe, absolue et identique sur tous les navigateurs.
- Les ems : ils permettent de définir une valeur proportionnelle à la taille des caractères utilisés dans la page.
- Les pourcentages : ils permettent de définir une valeur dynamique basée sur la taille de l'élément parent.
- Les vw : ils permettent de définir un pourcentage de la largeur du navigateur. Par exemple, 100vw = 10% de la largeur du navigateur, alors que 50vw n'en fait que 50%.
- Les vh : ils permettent de définir un pourcentage de la hauteur du navigateur. Par exemple, 100vw = 10% de la hauteur du navigateur, alors que 20vw n'en fait que 20%.
Dimension maximale d'un bloc
Il est possible de définir une dimension (largeur et/ou hauteur) d'un bloc avec les propriétés max-width et max-height.
Elles peuvent servir, par exemple, à éviter qu'un bloc ne dépasse de son contenant :
header{
width: 1750px;
max-width: 100%;
}
Ici, nous fixons la taille de notre header à 1750px de large. Dans le cas où le navigateur de l'internaute soit plus petit que cete valeur, la max-width prévoit que le header le dépasse pas :
Dimension minimale d'un bloc
Il est aussi possible de définir une hauteur ou largeur minimale à nos balises avec les propriétés min-height et min-width :
article{
min-height: 250px;
}
Ici, nous fixons une hauteur minimum à nos articles pour pas qu'ils soient trop petits en cas de contenu insuffisant :
