Chargement...

Hauteur et largeur CSS

Vous encadrez une boîte, l’arrondissez et lui donnez de l’espace extérieur et intérieur. Compétence suivante : décider de la taille de la boîte. width et height fixent la taille de la boîte de contenu — quelle largeur et quelle hauteur pour ce noyau.

Que font width et height ?

width contrôle la taille horizontale. height contrôle la verticale. Les valeurs courantes utilisent des longueurs comme px ou des tailles relatives comme %. Si vous ne les touchez pas, beaucoup d’éléments se dimensionnent selon leur contenu et le contexte de mise en page.

Taille fixe en pixels

Un départ quotidien clair : donnez à un panneau une largeur exacte (et éventuellement une hauteur) en pixels.

Largeur fixe en pixels

css
CSS Code 
.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Largeur et hauteur ensemble

Quand le design veut un rectangle précis — cadre miniature, tuile, emplacement média — réglez les deux.

Largeur et hauteur sur une tuile

css
CSS Code 
.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}

Largeur en pourcentage

Une largeur % est en général relative à la largeur du bloc conteneur (souvent le parent). width: 50% signifie « environ la moitié de la largeur de mon parent », pas magiquement la moitié de l’écran.

Moitié de la largeur du parent

css
CSS Code 
.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}

Outils de dimensionnement d’un coup d’œil

Au-delà de width et height simples, CSS offre des garde-fous.

📊 Outils de largeur et hauteur

Outil Rôle Note quotidienne
width / height Taille préférée de la boîte de contenu Commencez ici pour tailles fixes ou fluides
min-width / min-height Ne pas rétrécir en dessous Garder boutons ou barres latérales utilisables
max-width / max-height Ne pas grandir au-delà Adoucir images énormes ou textes larges
auto Laisser le navigateur calculer La hauteur par défaut suit souvent le contenu
% Relatif au bloc conteneur % de largeur courant ; % de hauteur exige une hauteur de parent définie

min-width comme plancher

Utile quand la boîte doit rester utilisable même si la mise en page serre.

Plancher de largeur minimale

css
CSS Code 
.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}

max-width comme plafond

Habitude classique pour un texte lisible ou des images qui ne s’étirent pas à l’infini sur grands écrans.

Plafond de largeur maximale

css
CSS Code 
.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}

La hauteur reste souvent auto

Pour les blocs de texte, laissez la hauteur grandir avec le contenu. Une hauteur fixe trop petite peut couper le texte sans stratégie overflow (leçon ultérieure).

Hauteur auto suit le contenu

css
CSS Code 
.article {
width: 100%;
max-width: 36rem;
height: auto; /* grandit avec les paragraphes */
padding: 1rem;
border: 1px solid #cbd5e1;
}

À vous de jouer

  1. Panneau avec width: 320px et padding/bordure visibles.
  2. Tuile 160×120 avec largeur et hauteur.
  3. Enfant avec width: 50% dans un parent plus large ; redimensionnez le parent.
  4. Ajoutez min-width: 12rem à un bouton et réduisez le viewport.
  5. Bloc texte avec max-width: 40rem et height: auto — puis une hauteur fixe très petite et le risque de coupe.

Erreurs fréquentes

  • Utiliser height: 50% sans hauteur explicite du parent (le pourcentage peut ne pas faire ce que vous croyez)
  • Verrouiller un court height sur une boîte de texte et s’étonner du contenu coupé
  • Oublier max-width sur de grandes images ou de longues lignes
  • Confondre width (taille de la boîte de contenu) et padding (coussin intérieur)
  • Supposer que width inclut toujours bordure et padding — cela dépend de box-sizing (bientôt)

Résumé

  • width et height dimensionnent la boîte de contenu
  • Utilisez px pour le fixe et % pour des largeurs fluides relatives au parent
  • min-* et max-* posent plancher et plafond
  • Préférez height: auto pour du texte qui grandit
  • Une hauteur en % exige un parent avec hauteur définie
  • Le calcul complet de la boîte arrive dans les prochaines leçons box model

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
9
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel