CSS Box Model : Comprendre marges, bordures, padding et contenu

Si vous souhaitez maîtriser le design web, comprendre le CSS Box Model est indispensable. Ce modèle explique comment les éléments HTML sont affichés dans une page web et comment leurs dimensions sont calculées.

Qu’est-ce que le CSS Box Model ?

Le Box Model définit la structure de chaque élément HTML sous forme de boîte. Chaque boîte comprend quatre parties :

1. Le contenu : la zone où se trouve votre texte ou vos images.
2. Le padding : l’espace entre le contenu et la bordure.
3. La bordure : le contour qui entoure le padding.
4. Les marges : l’espace extérieur qui sépare l’élément des autres.

+---------------------------+
|        Margin             |
|  +---------------------+  |
|  |       Border         |  |
|  |  +---------------+  |  |
|  |  |   Padding      |  |  |
|  |  | +-----------+  |  |  |
|  |  | |  Content  |  |  |  |
|  |  | +-----------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

Exemple visuel

Imaginons une carte de profil stylisée avec des marges, des bordures et du padding.

<div class="card">
  <h3>Jane Doe</h3>
  <p>Développeuse Web</p>
</div>

.card {
  margin: 20px; /* Espace extérieur */
  padding: 15px; /* Espace intérieur autour du contenu */
  border: 2px solid #000; /* Bordure */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Ombre pour un effet décoratif */
}

Marges, padding et bordures : comprendre leurs rôles

Les marges

Les marges sont utilisées pour créer de l’espace entre les éléments. Elles ne sont pas affectées par la couleur de fond ou les bordures.

Le padding

Le padding ajoute de l’espace entre le contenu et la bordure, améliorant ainsi la lisibilité.

Les bordures

Les bordures entourent le padding et peuvent être stylisées de différentes manières : solide, pointillée, en relief, etc.

Exemple pratique : Créer une carte stylisée

Voici comment appliquer les concepts du Box Model pour créer une carte attrayante.

<div class="profile-card">
  <h3>John Smith</h3>
  <p>Designer UX/UI</p>
  <button class="btn">Contact</button>
</div>

.profile-card {
  margin: 30px auto; /* Centrer la carte avec des marges */
  padding: 20px; /* Espace autour du contenu */
  border: 1px solid #ddd; /* Bordure discrète */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre pour un effet élégant */
  max-width: 300px;
  text-align: center;
}

.btn {
  margin-top: 10px;
  padding: 10px 20px;
  border: none;
  background-color: #007BFF;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background-color: #0056b3;
}

Conclusion

Le CSS Box Model est la base de toute conception web. En maîtrisant les marges, le padding, les bordures et les ombres, vous pouvez créer des designs professionnels et réactifs. Expérimentez avec ces concepts pour améliorer vos compétences en CSS !