Modèle de boîte CSS : margin, padding, border et display
Visualiseur du modèle de boîte CSS
Modèle de boîte CSS : margin vs padding, border, display | We.Inc
Faites glisser les curseurs du contenu, du padding, de la bordure et de la marge et regardez le modèle de boîte se redessiner, avec box-sizing, la fusion des marges, les styles de bordure et toutes les valeurs de display comparées en direct.
Chaque élément est dessiné sous forme de rectangles imbriqués : le contenu, puis le padding (l'espace à l'intérieur de la bordure, peint avec le fond), puis la bordure, puis la marge (un espace transparent à l'extérieur qui repousse les voisins). Avec box-sizing: border-box, la largeur que vous définissez inclut le padding et la bordure, ce qui rend les mises en page bien plus prévisibles. La propriété display décide de la façon dont les boîtes s'enchaînent.
Les quatre couches, de l'intérieur vers l'extérieur
Couche
Rôle
Reçoit le fond ?
Contenu
Contient le texte, les images et les éléments enfants
Oui
Padding
Espace de respiration entre le contenu et la bordure
Oui
Bordure
Une ligne visible (ou rien) autour du padding
Sa propre couleur de bordure
Marge
Écart entre cette boîte et ses voisines
Non, toujours transparente
Déplacez les quatre curseurs : le schéma, la taille totale mesurée et le CSS changent ensemble. Sous le visualiseur, vous pouvez basculer box-sizing, voir deux marges fusionner en une seule, et comparer block, inline, inline-block, flex, grid et none côte à côte sur les trois mêmes éléments.
Définissez une largeur et une hauteur pour la zone de contenu, puis ajoutez padding, bordure et marge avec les curseurs.
Basculez box-sizing entre content-box et border-box et observez comment la largeur affichée change.
Lisez la largeur et la hauteur totales réellement occupées par l'élément, marges comprises.
Copiez le CSS généré, puis descendez pour les démos de fusion des marges et de display.
Ajoutez *, *::before, *::after { box-sizing: border-box; } en haut de chaque feuille de style. La plupart des resets et des frameworks le font déjà.
Utilisez le padding quand vous voulez agrandir le fond ou la zone cliquable, et la marge quand vous voulez seulement éloigner des éléments distincts.
Dans un conteneur flex ou grid, préférez gap aux marges sur les enfants. Il ne se double jamais sur les bords.
L'outline est dessiné à l'extérieur de la bordure et ne prend aucune place, c'est pourquoi les anneaux de focus l'utilisent plutôt que border.
Questions fréquentes
Quelle différence entre margin et padding ?
Le padding se trouve à l'intérieur de la bordure : il est rempli par le fond de l'élément et fait partie de sa zone cliquable. La marge se trouve à l'extérieur de la bordure, est toujours transparente et ne sert qu'à séparer l'élément des autres. Les marges verticales entre blocs peuvent aussi fusionner, alors que le padding ne fusionne jamais.
Pourquoi mon élément est-il plus large que la largeur définie ?
Avec la valeur par défaut box-sizing: content-box, width ne s'applique qu'au contenu, et le padding et la bordure s'y ajoutent. Une boîte de 300px avec 20px de padding et une bordure de 2px s'affiche sur 344px de large. Passez à box-sizing: border-box et elle reste à 300px, le contenu se réduisant pour tenir.
Quand les marges fusionnent-elles ?
Les marges haute et basse des boîtes de type block dans le flux normal fusionnent quand elles se touchent : entre éléments frères, et entre un parent et son premier ou dernier enfant quand aucune bordure, aucun padding ni contenu inline ne les sépare. La plus grande marge l'emporte. Les marges ne fusionnent jamais dans les conteneurs flex ou grid, ni horizontalement.
Quelle différence entre display: none et visibility: hidden ?
display: none retire complètement l'élément de la mise en page : l'espace se referme et les lecteurs d'écran l'ignorent. visibility: hidden garde l'espace réservé mais ne peint rien, et le contenu est aussi masqué pour les technologies d'assistance. opacity: 0 conserve à la fois l'espace et la possibilité de cliquer ou de donner le focus.
Puis-je définir une largeur sur un élément inline ?
Non. La largeur, la hauteur et les marges verticales sont ignorées sur une simple boîte inline comme un span. Le padding vertical est peint mais n'écarte pas les lignes. Passez-le en inline-block, ou faites du parent un conteneur flex, et ces dimensions commencent à s'appliquer.
content-box et border-box en chiffres
Avec content-box, la largeur totale est égale à width plus le padding gauche et droit plus la bordure gauche et droite. La marge s'ajoute ensuite à l'extérieur. C'était le comportement d'origine du CSS, et c'est encore la valeur par défaut du navigateur pour la plupart des éléments.
Avec border-box, la largeur que vous écrivez est mesurée jusqu'au bord extérieur de la bordure. Le padding et la bordure empiètent sur la zone de contenu au lieu d'agrandir la boîte : une mise en page à deux colonnes de 50% plus 50% reste sur une ligne quel que soit le padding ajouté.
Des bordures au-delà de la simple ligne
Le raccourci border accepte une largeur, un style et une couleur dans n'importe quel ordre. Les styles sont solid, dashed, dotted, double, groove, ridge, inset, outset, none et hidden. Une bordure de style none a une largeur nulle quelle que soit la largeur écrite, ce qui surprend ceux qui ne définissent que border-width.
border-radius arrondit les coins de la bordure, du fond et de l'outline dans les navigateurs actuels. Une seule valeur arrondit les quatre coins ; une barre oblique définit des rayons horizontaux et verticaux distincts pour des coins elliptiques, et 50% sur un carré le transforme en cercle.
Comment display change la boîte
Les boîtes block commencent sur une nouvelle ligne et s'étirent pour remplir leur conteneur. Les boîtes inline s'insèrent dans une ligne de texte et ignorent width et height. inline-block s'insère comme du texte mais accepte les dimensions et les marges verticales, ce qui le rend pratique pour les badges et les boutons.
flex et grid font de l'élément un bloc vu de l'extérieur et un conteneur de mise en page à l'intérieur. Leurs enfants cessent de se comporter en block ou inline et suivent les règles flex ou grid, avec gap disponible pour l'espacement. contents supprime la boîte elle-même tout en gardant ses enfants, mais cette valeur a un historique de bugs d'accessibilité : testez-la avec un lecteur d'écran avant de vous y fier.
Margin ou padding ? Choisissez selon le besoin
Lequel utiliser
Vous voulez
Utilisez
Que la couleur de fond couvre l'espace
Une zone de clic plus grande sur un bouton
De l'espace entre deux cartes distinctes
margin, ou gap sur le parent
Un élément poussé à l'autre extrémité d'une ligne flex
margin-left: auto
Un bloc de largeur fixe centré
margin-inline: auto
Un espace qui ne fusionne jamais avec un voisin
padding, ou gap
La fusion des marges, en direct
La première paire montre deux éléments frères dont les marges de 24px et 40px se rencontrent : l'écart est de 40px, pas de 64px. La deuxième paire se trouve dans un conteneur flow-root, qui empêche la fusion des marges du parent et de l'enfant, et la troisième utilise flex, où rien ne fusionne.
Fusion entre frères et entre parent et enfant
Modifiez les marges et observez les écarts. Ajouter padding-top: 1px à la boîte extérieure empêche aussi la fusion du parent et de l'enfant.
Styles de bordure et rayons
Les huit styles de bordure visibles
groove, ridge, inset et outset ombrent la bordure pour simuler du relief. Ils rendent mieux à partir de 4px.
Formes de rayon : arrondi, pilule, cercle, ellipse
Un très grand rayon comme 999px crée une pilule de n'importe quelle longueur. 50% sur un carré donne un cercle.
Chaque valeur de display sur les trois mêmes éléments
Valeurs de display comparées
Valeur
Nouvelle ligne ?
Width et height fonctionnent ?
Usage typique
Tailwind
Oui
Oui
Sections, paragraphes, cartes
Non
Non
Mots à l'intérieur d'une phrase
Non
Oui
Badges, boutons dans une ligne de texte
Oui
Oui
Lignes ou colonnes d'éléments
Non
Oui
Une icône et un libellé dans du texte
Oui
Oui
Mises en page en deux dimensions
Non
Oui
Une petite grille insérée dans une ligne
Oui
Oui
Contient les floats et les marges des enfants
Boîte supprimée
Aucune boîte à dimensionner
Laisser les enfants rejoindre la mise en page du parent
Retiré de la mise en page
Non affiché
Masquer complètement
block, inline, inline-block, flex et grid côte à côte
Chaque ligne contient les trois mêmes spans avec width: 80px et du padding. Seul inline ignore la largeur.
display: none vs visibility: hidden vs opacity: 0
Trois façons de masquer, comparées
Propriété
Garde son espace ?
Cliquable ou focusable ?
Lu par les lecteurs d'écran ?
Peut avoir une transition ?
display: none
Non
Non
Non
Seulement avec allow-discrete dans les navigateurs récents
visibility: hidden
Oui
Non
Non
Oui, bascule à la fin ou au début
opacity: 0
Oui
Oui
Oui
Oui, en douceur
L'élément du milieu masqué de trois façons
Remarquez l'espace laissé par visibility et opacity, et l'espace refermé avec display: none.
Le reset border-box
Appliquer border-box partout
Les pseudo-éléments sont inclus car ce sont aussi des boîtes. Le Preflight de Tailwind inclut déjà cette règle.
Équivalents Tailwind
Utilitaires du modèle de boîte dans Tailwind (échelle d'espacement par défaut, 1 unité = 0.25rem)
CSS
Tailwind
padding: 1rem
padding-inline: 1.5rem
margin-top: 2rem
margin-inline: auto
border-width: 1px / 2px
border / border-2
border-style: dashed
border-radius: 0.5rem
border-radius: 9999px
box-sizing: border-box / content-box
box-border / box-content
visibility: hidden
opacity: 0
Visualiseur du modèle de boîte
Couche de marge
Boîte affichée (bord de la bordure)
Espace occupé, marges comprises
Le jaune est la marge, la ligne bleue la bordure, le vert le padding, le bleu clair le contenu.