5. Le Modèle de Boîte CSS

Le modèle de boîte (box model) est fondamental en CSS. Chaque élément HTML est considéré comme une boîte composée de plusieurs parties qui déterminent sa taille et son espace autour.

Les parties du modèle de boîte

• Contenu (content) : Le texte ou les images à l’intérieur de la boîte.
• Padding : L’espace entre le contenu et la bordure.
• Border : La bordure autour du padding.
• Margin : L’espace extérieur entre la boîte et les autres éléments.

Illustration et exemple CSS

div {
  width: 300px;
  padding: 20px;
  border: 5px solid #f39c12;
  margin: 30px;
}
    

Remarques

Comprendre le modèle de boîte permet de mieux contrôler la mise en page, notamment les espacements et les tailles des éléments. La propriété box-sizing permet de modifier comment la largeur et la hauteur sont calculées.

Exercice