En développement web, la mise en page repose sur trois piliers fondamentaux : le modèle de boîte (Box Model), le positionnement et le flottement. Comprendre le modèle de boîte est essentiel pour structurer correctement les interfaces utilisateur.

Qu'est-ce que le Box Model ?

Le concept du modèle de boîte en CSS stipule que chaque élément HTML est considéré comme une boîte rectangulaire. Cette boîte encapsule le contenu et définit l'espace qui l'entoure. Elle se compose de quatre parties distinctes :

• Contenu (Content) : Là où le texte et les images apparaissent.
• Remplissage (Padding) : L'espace entre le contenu et la bordure.
• Bordure (Border) : Une ligne entourant le remplissage et le contenu.
• Marge (Margin) : L'espace extérieur à la bordure, séparant l'élément des autres.

La Bordure (Border)

La propriété border permet de définir l'aspect du contour d'un élément. Elle regroupe l'épaisseur, le style et la couleur.

/* Syntaxe : border-width border-style border-color */
.mon-element {
   border: 2px solid #333;
}

Styles de bordure courants

Il est également possible de cibler un côté spécifique :

.bloc-info {
   border-top: 4px solid blue;
   border-bottom: 1px dashed gray;
}

Fusion des bordures de tableau

Pour obtenir des lignes fines dans un tableau, on utilise border-collapse :

table {
   border-collapse: collapse;
}
td, th {
   border: 1px solid black;
}

La Marge Interne (Padding)

Le padding définit l'espace à l'intérieur de la boîte. Voici les différentes manières de l'écrire :

• padding: 10px; (4 côtés)
• padding: 10px 20px; (Haut/Bas, Gauche/Droite)
• padding: 10px 20px 30px; (Haut, Gauche/Droite, Bas)
• padding: 5px 10px 15px 20px; (Haut, Droite, Bas, Gauche - sens horaire)

Impact sur les dimensions

Par défaut, l'ajout de padding augmente la taille totale de l'élément. Si vous définissez une largeur de 200px et un padding de 20px de chaque côté, la largeur totale réelle sera de 240px.

Solution : Soustraire la valeur du padding de la largeur initiale ou utiliser box-sizing: border-box;.

La Marge Externe (Margin)

Le margin gère l'espace entre les éléments adjacents. Pour centrer un bloc horizontalement, on utilise souvent :

.conteneur-centre {
   width: 800px;
   margin: 0 auto;
}

Fusion des marges (Margin Collapsing)

Lorsque deux marges verticales se rencontrent (par exemple entre deux parargaphes), elles ne s'additionnent pas. La valeur la plus élevée est conservée.

Pour les éléments imbriqués, la marge du fils peut "fuir" sur le parent. Pour éviter cela, on peut ajouter une bordure au parent, un padding, ou la propriété overflow: hidden;.

Réinitialisation des styles par défaut

Les navigateurs appliquent des marges et paddings par défaut. Il est recommandé de les remettre à zéro en début de projet :

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

Améliorations Visuelles

Bordures Arrondies

La propriété border-radius permet de créer des coins arrondis ou des cercles parfaits.

.bouton-rond {
   width: 100px;
   height: 100px;
   border-radius: 50%; /* Crée un cercle */
}

Ombres de boîte et de texte

Ajoutez de la profondeur avec box-shadow et text-shadow.

.carte {
   /* h-offset v-offset flou étalement couleur */
   box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}

.titre-lumineux {
   text-shadow: 2px 2px 4px #FF0000;
}

Gestion des Listes

Pour supprimer les puces par défaut des balises <li>, on utilise :

ul {
   list-style: none;
}