Chapitre 4 : Boîte CSS, marges et bordures

Comprenez le modèle de boîte CSS et maîtrisez les propriétés de marges, padding et bordures pour créer des mises en page précises.

1. Le modèle de boîte (Box Model)

Tout élément HTML est une boîte rectangulaire constituée de plusieurs couches :

Contenu : texte, image, etc.
Padding : espace autour du contenu (intérieur de la boîte)
Border : bordure entre le padding et la marge
Margin : espace entre la boîte et les autres éléments

div {

                          width: 200px;

                          padding: 20px;

                          border: 2px solid #333;

                          margin: 30px;

                        }

2. Propriétés CSS associées

2.1 Marges (margin)

Crée un espace autour d'un élément, à l'extérieur de la bordure.

margin: 20px; /* tous les côtés */

margin: 10px 20px; /* vertical | horizontal */

margin: 10px 15px 5px 0; /* haut | droite | bas | gauche */

2.2 Espacement interne (padding)

Crée un espace autour du contenu, à l'intérieur de la bordure.

padding: 1em 2em;

2.3 Bordure (border)

Ajoute un cadre autour de l'élément.

border: 2px solid #00695c;

Il est possible de styliser chaque côté séparément : border-top, border-right, etc.

2.4 Outline

Contour extérieur non inclus dans le box model (utile pour l'accessibilité).

outline: 2px dashed red;

3. Largeur, hauteur et `box-sizing`

3.1 Propriétés

width: 300px;

height: 150px;

max-width: 100%;

3.2 box-sizing

Par défaut, la taille d'un élément exclut le padding et la bordure.

box-sizing: content-box; /* comportement par défaut */

box-sizing: border-box;  /* inclut padding et border dans la largeur/hauteur */

Bonne pratique :

* {

                          box-sizing: border-box;

                        }

4. Bonnes pratiques

Utiliser box-sizing: border-box pour simplifier les calculs de dimensions
Organiser visuellement les éléments avec margin et padding
Utiliser les outils de développement du navigateur pour analyser le box model

5. À éviter

Superposer des marges non maîtrisées (marge extérieure des blocs)
Oublier que width n'inclut pas les bordures par défaut
Utiliser des marges négatives sans comprendre les conséquences

6. Exercice pratique

Objectif : Construire une carte d'article avec padding, marge et bordure.

Consignes :

Créer un <div> avec une classe "carte"
Y inclure un <h2> et un <p>
Appliquer une largeur fixe, un padding, une border, et une margin

Exemple de style :

.carte {

                          width: 300px;

                          padding: 1em;

                          border: 1px solid #ccc;

                          margin: 2em auto;

                          background-color: #fafafa;

                        }

HTML :

<div class="carte">

                          <h2>Titre de l'article</h2>

                          <p>Ceci est un résumé d'article.</p>

</div>

7. À retenir

Le modèle de boîte est fondamental en CSS
Maîtriser margin, padding et border permet un meilleur contrôle du layout
Utiliser box-sizing: border-box facilite la gestion des dimensions