Le modèle de boîte¶

Chaque élément est une boîte rectangulaire composée de couches concentriques : contenu, padding, bordure et margin.

Comprendre ces quatre couches est fondamental en design CSS. Quand vous définissez du Padding sur un bouton, ajoutez une bordure à une carte ou espacez des éléments avec Margin, vous travaillez avec le modèle de boîte.

Les quatre couches, de l'intérieur vers l'extérieur :

Contenu — texte, images, éléments enfants. Dimensionné par Width et Height.
Padding — espace transparent à l'intérieur de l'élément, entre le contenu et la bordure. Défini par Padding.
Bordure — une ligne autour du padding. Définie par les propriétés Border.
Margin — espace transparent à l'extérieur de la bordure, séparant cet élément de ses voisins. Défini par Margin.

Imaginez un tableau encadré : le tableau est le contenu, le passe-partout est le Padding, le cadre est la bordure, et l'espace jusqu'au tableau suivant est le Margin.

Width et Height¶

Width et Height contrôlent la taille de la zone de contenu (sans inclure le Padding, la bordure ou le Margin).

Pour définir Width ou Height :

Sélectionnez un élément
Dans le Style Manager, ouvrez la section Dimension
Entrez une valeur dans le champ Width ou Height

Valeurs courantes de Width/Height¶

Tailles absolues : - 300px — exactement 300 pixels - 50% — la moitié de la largeur/hauteur du parent - 100vh — 100% de la hauteur du viewport (plein écran)

Mots-clés responsives : - auto — le navigateur calcule selon le contenu et le contexte (valeur par défaut) - max-content — aussi large/haut que le contenu le nécessite, sans retour à la ligne - min-content — aussi étroit/court que possible tout en contenant le contenu - fit-content — s'adapte à l'espace disponible mais ne dépasse jamais max-content

Héritage : - inherit — prend la Width/Height du parent - initial — utilise la valeur par défaut du navigateur - unset — supprime toute valeur que vous avez définie

Unités disponibles¶

Vous pouvez utiliser ces unités avec n'importe quelle valeur numérique :

Unité	Signification
`px`	Pixels (taille fixe)
`%`	Pourcentage de la largeur/hauteur du parent
`em`	Relatif à la taille de police de l'élément (1em = 1x la taille de police)
`rem`	Relatif à la taille de police racine (généralement 16px)
`vh`	Hauteur du viewport (1vh = 1% de la hauteur de l'écran)
`vw`	Largeur du viewport (1vw = 1% de la largeur de l'écran)
`dvh`	Hauteur dynamique du viewport (prend en compte la barre d'adresse)
`dvw`	Largeur dynamique du viewport
`cqi`	Taille en ligne de la requête de conteneur (responsive par rapport au conteneur parent)
`cqb`	Taille en bloc de la requête de conteneur
`cqw`	Largeur de la requête de conteneur
`cqh`	Hauteur de la requête de conteneur
`cqmin`	Minimum de la requête de conteneur
`cqmax`	Maximum de la requête de conteneur

Les plus courantes : px, %, em, rem, vh. Les unités de requête de conteneur (cq*) sont destinées aux mises en page responsives avancées.

Contraintes Min et Max¶

Sous Width et Height dans la section Dimension, vous trouverez quatre champs de contrainte :

Min-Width — l'élément ne peut pas rétrécir en dessous de cette largeur
Max-Width — l'élément ne peut pas dépasser cette largeur
Min-Height — l'élément ne peut pas rétrécir en dessous de cette hauteur
Max-Height — l'élément ne peut pas dépasser cette hauteur

Ils acceptent les mêmes unités et mots-clés que Width/Height.

Exemple : définissez Width sur 100% et Max-Width sur 800px. Le conteneur remplit l'écran sur les petits appareils mais ne dépasse jamais 800px sur les grands écrans — le conteneur responsive parfait.

Padding¶

Padding est l'espace transparent à l'intérieur de l'élément, entre le contenu et la bordure. Le Padding hérite de la couleur de fond de l'élément.

Pour définir le Padding :

Sélectionnez un élément
Ouvrez la section Dimension du Style Manager
Trouvez le champ composite Padding
Développez-le pour voir les sous-champs :
Padding-top — espace au-dessus du contenu
Padding-right — espace à droite du contenu
Padding-bottom — espace en dessous du contenu
Padding-left — espace à gauche du contenu

Chaque champ de Padding accepte les mêmes unités que Width/Height (px, %, em, rem, etc.). Définir Padding-top sur 20px ajoute 20 pixels d'espace en haut.

Valeurs courantes de Padding : 10px, 15px, 20px, 24px, 32px. Ce sont de bonnes bases d'espacement pour les boutons, cartes et conteneurs.

Raccourci : Si les quatre côtés sont identiques, vous pouvez définir le champ principal Padding sur une seule valeur (par ex., 20px définit les quatre côtés à 20px).

Pourquoi Padding plutôt que Margin ? Le Padding est inclus dans le fond et la bordure de l'élément. Si vous définissez une couleur de fond ou un Border-radius, le Padding le respecte. Le Margin non — il est toujours transparent et se situe en dehors du fond.

Bordure¶

Border est une ligne visible (ou invisible) autour du Padding.

Chaque bordure a trois propriétés :

Width — épaisseur de la ligne (par ex., 2px, 4px)
Style — apparence de la ligne
Color — couleur de la ligne

Pour définir une bordure :

Sélectionnez un élément
Ouvrez la section Decorations du Style Manager
Trouvez Border radius (ce sont les coins arrondis, pas la bordure elle-même)

Note : Pour le moment, il n'y a pas de champ composite Border dédié dans l'interface. Vous pouvez définir les bordures via Border radius pour les coins arrondis, ou utiliser une variable CSS ou du CSS personnalisé pour un contrôle plus fin des bordures.

Border radius¶

Border-radius crée des coins arrondis.

Pour définir le Border radius :

Ouvrez la section Decorations du Style Manager
Trouvez Border radius
Définissez les rayons individuels de chaque coin :
Top left, Top right, Bottom right, Bottom left

Chacun accepte des unités : px, %, em, rem, etc. 10px arrondit le coin de 10 pixels. Pour arrondir tous les coins de manière égale, définissez les quatre à la même valeur.

Margin¶

Margin est l'espace transparent à l'extérieur de la bordure, séparant cet élément de ses voisins.

Pour définir le Margin :

Sélectionnez un élément
Ouvrez la section Dimension du Style Manager
Trouvez le champ composite Margin
Développez-le pour voir les sous-champs :
Margin-top — espace au-dessus de l'élément
Margin-right — espace à droite
Margin-bottom — espace en dessous
Margin-left — espace à gauche

Chacun accepte les mêmes unités que le Padding. Vous pouvez aussi définir auto à gauche et à droite pour centrer un élément : définissez Margin-left sur auto et Margin-right sur auto (mais uniquement si l'élément a une largeur fixe et que son parent n'est pas un conteneur flex).

Valeurs courantes de Margin : 10px, 15px, 20px, 24px, 32px.

Margin vs Padding : - Le Padding est à l'intérieur du fond et de la bordure de l'élément - Le Margin est à l'extérieur, espace transparent entre les éléments - Utilisez le Padding pour espacer le contenu du bord de l'élément - Utilisez le Margin pour espacer cet élément de ses voisins

Fusion des marges : deux marges verticales adjacentes peuvent fusionner en une seule. Par exemple, si l'élément A a un Margin-bottom de 20px et l'élément B a un Margin-top de 20px, ils ne s'additionnent pas pour donner 40px — ils fusionnent à 20px. C'est un comportement CSS normal. Pour éviter toute confusion, utilisez les gaps lorsque vous agencez des conteneurs flex (voir Flexbox).

Box sizing¶

Box-sizing détermine si le Padding et la bordure sont inclus dans la Width/Height de l'élément ou non.

Deux valeurs :

content-box (par défaut en CSS) — Width/Height contrôlent uniquement la zone de contenu. Le Padding et la bordure s'ajoutent par-dessus. Donc si Width est 100px et Padding est 10px, la largeur totale est 120px.
border-box — Width/Height contrôlent la boîte complète (contenu + padding + bordure). Donc si Width est 100px et Padding est 10px, la zone de contenu rétrécit à 80px pour maintenir le total à 100px.

La plupart des designers préfèrent border-box car c'est plus prévisible. Vous pouvez le définir globalement via CSS ou par élément via le Style Manager.

Overflow¶

Quand le contenu est trop grand pour son conteneur, Overflow contrôle ce qui se passe.

Dans la section Dimension, trouvez Overflow :

Overflow X — comportement du débordement horizontal
Overflow Y — comportement du débordement vertical

Options :

Valeur	Comportement
`visible`	Le contenu déborde hors du conteneur (par défaut)
`hidden`	Le contenu est rogné ; le débordement est masqué
`scroll`	Ajoute des barres de défilement (même si non nécessaires)
`auto`	Ajoute des barres de défilement uniquement quand le contenu déborde

Exemple : définissez Overflow sur auto sur une carte haute. Si le contenu tient, pas de barre de défilement. Si le contenu déborde, une barre de défilement apparaît pour que les utilisateurs puissent défiler à l'intérieur de la carte.

Exemple pratique : carte centrée avec Padding et Margin¶

Vous construisez une carte avec des coins arrondis, un espacement interne et un écart par rapport aux voisins.

Ajoutez un Container, définissez la balise sur article
Définir la taille :
Width : 400px
Max-width : 100% (pour qu'elle rétrécisse sur les petits écrans)
Définir l'espacement interne :
Padding : 24px (tous les côtés)
Cela crée 24px d'espace entre le contenu de la carte et ses bords
Définir l'espacement externe :
Margin : 16px (tous les côtés)
Cela crée 16px d'écart entre cette carte et les autres éléments
Ajouter les coins arrondis :
Border radius : tous les coins à 8px
Fond optionnel :
Background color : un gris clair
Le Padding sera à l'intérieur de ce fond

La carte a maintenant un espace de respiration interne (Padding), une séparation externe par rapport aux voisins (Margin) et une apparence professionnelle avec des coins arrondis.

Erreurs courantes¶

Confondre Padding et Margin. Le Padding est à l'intérieur (respecte le fond/la bordure), le Margin est à l'extérieur (toujours transparent).
Utiliser Margin quand vous vouliez Padding. Si vous voulez de l'espace à l'intérieur d'un bouton, utilisez Padding, pas Margin. Le Margin n'affecte pas l'apparence interne du bouton.
Définir Width à 100% sur un élément avec du Padding. Si Width est 100% et Padding est 20px, le total est plus large que le parent (sauf si vous définissez Box-sizing sur border-box). Utilisez Max-width au lieu de Width pour les conteneurs flexibles.
Oublier de définir une largeur avant d'utiliser les marges auto. Margin: auto centre un élément uniquement s'il a une largeur fixe et n'est pas dans un conteneur flex.
Appliquer des marges négatives. Bien que possible, les marges négatives sont déroutantes et signalent généralement que vous devriez restructurer votre mise en page. Évitez-les.

En savoir plus¶

MDN : Le modèle de boîte CSS — référence détaillée
MDN : margin — comportement et fusion des marges
MDN : padding — référence du Padding
MDN : border-radius — référence des coins arrondis
Gaps Flexbox — espacement moderne dans les mises en page
Design responsive — utiliser des unités relatives pour des tailles responsives

Avancé : box-sizing dans Silex

Par défaut en CSS, le dimensionnement content-box fait que Width et Height contrôlent uniquement la zone de contenu — le Padding et la bordure s'ajoutent par-dessus. Cela rend la taille visible totale plus grande que la Width que vous avez définie.

Silex utilise le dimensionnement border-box globalement, où Width et Height incluent le Padding et la bordure. Si vous définissez un élément à 300px de large avec 20px de Padding et 2px de bordure, la largeur visible totale reste 300px — la zone de contenu rétrécit pour s'adapter. C'est pourquoi ajouter du Padding ne rend pas les éléments plus larges dans Silex.

Vous y pensez rarement, mais cela explique le comportement que vous observez sur le canevas.

Référence : toutes les unités et propriétés

Unité	Signification
`px`	Pixels (absolu, taille fixe)
`%`	Pourcentage de la largeur/hauteur du parent
`em`	Relatif à la taille de police de l'élément
`rem`	Relatif à la taille de police racine
`vh`	1% de la hauteur du viewport
`vw`	1% de la largeur du viewport
`dvh`	1% de la hauteur dynamique du viewport (adapté mobile)
`dvw`	1% de la largeur dynamique du viewport
`cqi`, `cqb`, `cqw`, `cqh`, `cqmin`, `cqmax`	Unités de requête de conteneur (responsive avancé)

Toutes les propriétés du modèle de boîte disponibles¶

Propriété	Usage	Unités
Width, Height	Taille du contenu	px, %, em, rem, vh, vw, cq*, auto, max-content, min-content, fit-content
Min-Width, Max-Width, Min-Height, Max-Height	Contraintes de taille	identiques à Width/Height
Padding-Top, Padding-Right, Padding-Bottom, Padding-Left	Espacement interne	px, %, em, rem, vh, vw, cq*, auto, inherit, initial, unset
Margin-Top, Margin-Right, Margin-Bottom, Margin-Left	Espacement externe	px, %, em, rem, vh, vw, cq*, auto, inherit, initial, unset
Border-Top-Left-Radius, Border-Top-Right-Radius, Border-Bottom-Right-Radius, Border-Bottom-Left-Radius	Arrondi des coins	px, %, em, rem, vh, vw, cq*, auto, inherit, initial, unset
Overflow-X, Overflow-Y	Gestion du débordement de contenu	visible, hidden, scroll, auto, inherit, initial, unset

Quiz¶

Q1 : Vous définissez Width à 400px et Padding à 20px tout autour. Quelle est la largeur de l'élément à l'écran ?

A) 440px (le Padding s'ajoute à la largeur)
B) 400px (Silex utilise le dimensionnement border-box)
C) 360px (le Padding se soustrait de la largeur)

Réponse

B) 400px — Silex utilise le dimensionnement border-box. Width inclut le Padding, donc la zone de contenu rétrécit à 360px pour maintenir le total à 400px.

Q2 : Deux paragraphes sont empilés. Le premier a un Margin-Bottom de 24px, le second un Margin-Top de 16px. Quel est l'espace entre eux ?

A) 40px (les marges s'additionnent)
B) 24px (la plus grande marge l'emporte)
C) 16px (la plus petite marge l'emporte)

Réponse

B) 24px — les marges verticales fusionnent. Le navigateur utilise la plus grande valeur, pas la somme. C'est un comportement CSS normal.

Q3 : Vous voulez un conteneur responsive qui remplit l'écran mais ne dépasse jamais 960px et reste centré. Comment faire ?

A) Width: 100%, Max-width: 960px, Margin-left: auto, Margin-right: auto
B) Width: 960px, Margin: auto
C) Width: 100%, Padding: 20px à gauche et à droite

Réponse

A) Width: 100%, Max-width: 960px, Margin-left: auto, Margin-right: auto — cela remplit l'écran jusqu'à 960px et le centre.

Q4 : Un conteneur arrondi a une image enfant qui dépasse les coins. Comment la rogner ?

A) Définir le Border-radius de l'image pour correspondre au conteneur
B) Définir l'Overflow du conteneur sur hidden
C) Ajouter du Padding au conteneur

Réponse

B) Définir l'Overflow du conteneur sur hidden — cela rogne le contenu enfant à la forme du conteneur, y compris les coins arrondis.

Q5 : Le Padding est l'espace à l'intérieur d'un élément. Que fait le Margin ?

A) La même chose que le Padding
B) L'espace à l'extérieur de l'élément, le séparant de ses voisins
C) Une bordure visuelle autour de l'élément

Réponse

B) L'espace à l'extérieur de l'élément, le séparant de ses voisins — le Padding respecte la couleur de fond, le Margin est toujours transparent.

Éditer cette page sur GitLab