Outils de design

Visualiseur de modèle de boîte CSS — Espacement interactif

Ajustez la largeur, la hauteur, remplissage, bordure et marge avec un diagramme de modèle de boîte en direct. Comparez l'occupation de la zone de contenu et de la zone de bordure et copiez le CSS correspondant.

Accès rapide→Générateur Flexbox

CSSModèle de boîteVisuel

Accès rapide:Générateur Flexbox Générateur de grille CSS Convertisseur d'unités CSS

Ajouter cet outil aux favoris

Aucun mode de stockage des favoris n’a été sélectionné.

Actions rapides

Retour à Outils de design Parcourir tous les outils

Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.

Cas d’usage

Comparer le dimensionnement de la zone de contenu et de la zone de bordure
Confirmer l'impact du remplissage et de la marge sur la mise en page space
Utiliser comme outil pédagogique pour les bases de la mise en page CSS

Mode d’emploi

Ajuster les commandes numériques
Inspecter les couches visuelles et les totaux
Copier le CSS généré

Exemples d’entrée et de sortie

Entrée

width:200px padding:20px border:2px margin:24px

Largeur totale

292px (content-box)

FAQ

Quelle est la différence entre content-box et border-box ?

Dans content-box, la largeur/hauteur couvre uniquement le contenu. Dans la zone de bordure, la largeur/hauteur inclut le contenu, le remplissage et la bordure.

Outils

Outils associés

Poursuivez avec un autre outil traduit pour une tâche proche.

Générateur Flexbox

Générateur Flexbox — Mise en page visuelle unidimensionnelle

Disponible

Ajustez la direction flexible, la justification du contenu, l'alignement des éléments, le retour à la ligne et l'espacement avec un aperçu en direct. Ajoutez ou supprimez des cases pour voir l'habillage et l'espacement, puis copiez le CSS (et l'échafaudage HTML) généré dans votre projet.

Conception CSS Mise en page

Ouvrir l’outil

Générateur de grille CSS

Générateur de grille CSS – Lignes, colonnes et espaces

Disponible

Définissez le nombre de colonnes et de lignes ainsi que les espaces pour générer un affichage de base : disposition en grille. Prévisualisez la structure des pistes, essayez des modèles rapides et copiez du CSS ou du HTML pour les mises en page d'administration et les grilles de cartes.

CSS Grille Mise en page

Ouvrir l’outil

Convertisseur d'unités CSS

Convertisseur d'unités CSS — px, rem, em, vw

Disponible

Convertissez entre px, rem, em, pt, vw, vh et %. Personnalisez la taille de la police racine, la taille de la police parent et la taille de la fenêtre d'affichage pour un travail réactif et un transfert de la conception au code.

CSS Unités Conversion

Ouvrir l’outil