Comprendre la largeur, la hauteur, la marge et le remplissage
Apprenez comment la largeur, la hauteur, la marge et le remplissage définissent les dimensions et l’espacement des éléments.
Comprendre la largeur, la hauteur, la marge et le remplissage est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Le concept du modèle de boîte
Chaque élément HTML est affiché sous la forme d'une boîte rectangulaire. Le modèle de boîte CSS décrit les quatre couches qui composent cette boîte, de l'intérieur vers l'extérieur : contenu → remplissage → bordure → marge.
width et height
width et height définissent les dimensions de la zone de contenu. Par défaut, le remplissage et la bordure s'ajoutent à cette taille.
<div class="box"></div>
padding
padding est un espace transparent à l'intérieur de la bordure, entre le contenu et le bord de la bordure. Il fait partie de la zone de l'élément sur laquelle il est possible de cliquer et qui reçoit l'arrière-plan.
<div class="card">Card content</div>
Notations longues de padding
Chaque côté peut être défini individuellement :
<div class="element">Padded element</div>
margin
margin est un espace transparent à l'extérieur de la bordure. Il éloigne les autres éléments. Les marges négatives rapprochent les éléments ou les font se chevaucher.
<div class="section">Centered section with bottom margin</div>
Fusion des marges
Les marges verticales fusionnent entre des éléments de bloc adjacents : l'espace réel correspond à la plus grande des deux marges, et non à leur somme. Les marges horizontales ne fusionnent jamais.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
Empêcher la fusion des marges
La fusion des marges est empêchée lorsque :
- les éléments sont des enfants flexibles ou de grille
- un parent possède
overflow: hidden - un parent possède un
paddingentre lui-même et son premier enfant - un élément en ligne sépare les éléments frères
Marges auto
Définir les marges horizontales sur auto pour un élément de bloc de largeur fixe le centre dans son conteneur. Il s'agit de la technique classique de centrage.
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
Limitez les dimensions avec des bornes minimales et maximales afin de conserver des éléments lisibles quelle que soit la taille de l'écran :
<div class="content">Readable content column capped at 65 characters wide.</div>
Calcul de la taille totale d'un élément
Dans le modèle content-box par défaut, largeur totale = width + padding-left + padding-right + border-left + border-right. Cela peut être surprenant et explique pourquoi border-box est préféré.
Propriétés logiques des marges et du remplissage
Les CSS modernes proposent des équivalents logiques : margin-block, margin-inline, padding-block-start, etc. Ceux-ci s'adaptent automatiquement au sens d'écriture.
<div class="card">Logical padding-block/inline</div>
Vérification rapide
Quelles couches sont incluses dans la largeur totale affichée d'un élément de bloc selon le modèle de boîte par défaut ?
Récapitulatif
Les couches du modèle de boîte sont le contenu, le remplissage, la bordure et la marge. Le remplissage se trouve à l'intérieur de la bordure ; la marge se trouve à l'extérieur. Les marges verticales fusionnent entre des éléments frères adjacents. Utilisez margin: 0 auto avec une largeur fixe pour centrer les éléments de bloc.
Questions Fréquemment Posées
La leçon « Comprendre la largeur, la hauteur, la marge et le remplissage » est-elle gratuite ?
Oui — le texte complet de « Comprendre la largeur, la hauteur, la marge et le remplissage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Comprendre la largeur, la hauteur, la marge et le remplissage » ?
Apprenez comment la largeur, la hauteur, la marge et le remplissage définissent les dimensions et l’espacement des éléments. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Comprendre la largeur, la hauteur, la marge et le remplissage » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Comprendre la largeur, la hauteur, la marge et le remplissage
- Styles, largeur et couleur des bordures
- Box-sizing : Content-Box ou Border-Box
- Contour et ombre de boîte