Comment dimensionner une boîte en CSS

Les dimensions et le calcul de la boîte
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

À la fin de cette vidéo, vous serez en mesure de :

- Utiliser les propriétés width et height de CSS
- Comprendre l'effet du padding et des bordures sur les dimensions des boîtes
- Ajuster les dimensions des boîtes pour correspondre exactement à vos besoins.

Découvrez comment utiliser les propriétés width et height en CSS pour dimensionner des boîtes, et comprenez l'importance du padding et des bordures.

Dans cette leçon, nous allons apprendre à définir la taille d'une boîte en CSS. En utilisant les propriétés width et height, nous pouvons contrôler la largeur et la hauteur de nos éléments. Cependant, il est crucial de comprendre l'impact des éléments tels que le padding et les bordures sur les dimensions finales des boîtes. Par défaut, le navigateur inclut ces valeurs dans la dimension totale de la boîte, ce qui peut entraîner une largeur ou une hauteur plus grande que prévu. Pour éviter ce problème, nous devons ajuster les dimensions en déduisant la taille du padding et des bordures. De plus, il est déconseillé de fixer une hauteur précise aux boîtes car leur contenu peut varier et dépasser les dimensions définies. Enfin, nous mentionnerons brièvement le modèle de boîte alternatif disponible en CSS3 pour gérer ces situations de manière plus intuitive.

Voir plus
Questions réponses
Pourquoi est-il déconseillé de fixer une hauteur à une boîte en CSS ?
Fixer une hauteur à une boîte en CSS est déconseillé car le contenu peut varier et dépasser les dimensions définies, créant des problèmes d'affichage.
Comment le padding et les bordures affectent-ils les dimensions d'une boîte ?
Le padding et les bordures augmentent la taille totale de la boîte puisqu'ils sont ajoutés à la dimension définie par width et height.
Que se passe-t-il lorsqu'on ajoute du padding à une boîte de 500 pixels de large ?
Lorsque du padding est ajouté à une boîte de 500 pixels de large, la largeur totale de la boîte augmente en incluant la taille du padding.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 10 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !