Modèle de boîte CSS

Introduction

Bienvenue dans le laboratoire du modèle de boîte CSS ! En conception web, chaque élément HTML peut être considéré comme une boîte. Le modèle de boîte CSS (CSS Box Model) est un concept fondamental qui décrit comment ces boîtes sont rendues sur une page web. Il se compose de quatre parties principales : la zone de contenu (content area), le remplissage (padding), la bordure (border) et la marge (margin).

Dans ce laboratoire, vous apprendrez à manipuler chacun de ces composants pour contrôler la taille et l'espacement des éléments. Nous travaillerons avec un fichier index.html et un fichier style.css. Toutes vos modifications seront apportées dans le fichier style.css, et vous pourrez voir instantanément les résultats en passant à l'onglet Web 8080 dans l'interface LabEx.

Commençons !

Définir la propriété width sur un élément div

Dans cette étape, nous allons commencer par définir la taille de la zone de contenu de notre élément. La propriété width en CSS définit la largeur de la boîte de contenu d'un élément. Les autres composants du modèle de boîte (padding, border, margin) seront ajoutés autour de cette zone de contenu.

Tout d'abord, localisez le fichier style.css dans l'explorateur de fichiers sur le côté gauche de l'IDE Web. Cliquez dessus pour l'ouvrir dans l'éditeur.

Maintenant, ajoutez la règle CSS suivante au fichier style.css. Cette règle cible l'élément div avec la classe box et définit sa largeur à 300 pixels.

.box {
  width: 300px;
}

Après avoir ajouté le code, enregistrez le fichier (Ctrl+S ou Cmd+S). Pour voir l'effet, cliquez sur l'onglet Web 8080. Vous remarquerez que le texte à l'intérieur de la boîte s'enroule maintenant pour s'adapter à un conteneur de 300 pixels de large.

Appliquer la propriété padding avec des valeurs uniformes

Dans cette étape, nous allons ajouter un espace entre le contenu et le bord de l'élément. Cet espace est appelé padding. La propriété padding dégage une zone autour du contenu. Elle se situe à l'intérieur de la bordure de l'élément.

Ajoutons 20 pixels de padding sur les quatre côtés de notre boîte. Modifiez la règle .box existante dans votre fichier style.css pour inclure la propriété padding.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue; /* Added for better visualization */
}

Nous avons également ajouté une background-color pour rendre les zones de contenu et de padding plus visibles. Enregistrez le fichier et basculez vers l'onglet Web 8080. Vous verrez qu'il y a maintenant un espace bleu clair de 20 pixels entourant le contenu textuel à l'intérieur de la boîte. Notez que la largeur visible globale de la boîte a augmenté, car le padding est ajouté par-dessus la largeur du contenu.

Utiliser la propriété border avec style, largeur et couleur

Dans cette étape, nous allons ajouter une border (bordure) autour du padding et du contenu de notre élément. La propriété border est une propriété raccourcie qui permet de définir la largeur, le style et la couleur de la bordure en une seule fois.

Ajoutons une bordure noire pleine d'une largeur de 2 pixels. Mettez à jour la règle .box dans votre fichier style.css comme indiqué ci-dessous :

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
}

Les valeurs pour la propriété border sont border-width (largeur de la bordure), border-style (style de la bordure) et border-color (couleur de la bordure), respectivement.

Enregistrez le fichier et actualisez l'onglet Web 8080. Vous verrez maintenant une ligne noire dessinée autour de la zone de padding de la boîte. La largeur totale de l'élément a de nouveau augmenté pour accueillir cette nouvelle bordure.

Implémenter la propriété margin pour l'espacement

Dans cette étape, nous allons contrôler l'espace à l'extérieur de la bordure de l'élément. Ceci est fait en utilisant la propriété margin. La marge crée un espace vide autour d'un élément, repoussant les autres éléments loin de lui.

Ajoutons une marge de 50 pixels sur tous les côtés de notre boîte pour créer une séparation avec l'en-tête et les bords de la page. Ajoutez la propriété margin à la règle .box dans style.css.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
}

Enregistrez le fichier et vérifiez l'onglet Web 8080. Vous observerez que toute la boîte est maintenant repoussée vers le bas par rapport à l'élément <h1> et éloignée du bord gauche de la fenêtre du navigateur. Cela démontre comment la marge est utilisée pour contrôler l'espacement entre les éléments.

Ajouter box-sizing border-box pour inclure le padding

Dans cette étape, nous allons aborder un défi de mise en page courant. Par défaut, les propriétés width (largeur) et height (hauteur) d'un élément s'appliquent uniquement à la boîte de contenu. Le padding et la bordure sont ajoutés par-dessus, ce qui peut rendre le dimensionnement imprévisible. Pour notre boîte, la largeur totale est actuellement de 300px (width) + 40px (padding gauche/droit) + 4px (bordure gauche/droit) = 344px.

Pour simplifier cela, nous pouvons utiliser la propriété box-sizing. En la définissant sur border-box, nous indiquons au navigateur d'inclure le padding et la bordure dans la largeur et la hauteur totales de l'élément.

Ajoutez la propriété box-sizing: border-box; à votre règle .box.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
  box-sizing: border-box;
}

Enregistrez le fichier et regardez l'onglet Web 8080. Vous verrez la boîte rétrécir. Désormais, la largeur totale de la boîte, y compris le padding et la bordure, est exactement de 300 pixels. Le navigateur ajuste automatiquement la zone de contenu pour qu'elle s'adapte. Ce comportement est beaucoup plus intuitif pour la création de mises en page.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez acquis avec succès les bases du modèle de boîte CSS (CSS Box Model).

Dans ce laboratoire, vous avez pratiqué :

• La définition de la width (largeur) de la zone de contenu d'un élément.
• L'application du padding pour créer un espace entre le contenu et la bordure.
• L'ajout d'une border (bordure) autour du padding et du contenu.
• L'utilisation de la margin pour créer un espace à l'extérieur de la bordure de l'élément.
• L'utilisation de box-sizing: border-box pour un dimensionnement d'élément plus prévisible et intuitif.

Comprendre le modèle de boîte est crucial pour contrôler la mise en page et l'espacement des éléments sur une page web. Continuez à pratiquer ces concepts pour maîtriser le CSS.