HTML 5 - 4.3 : Comment ajouter des marges et des bordures
Le modèle de boîte CSS définit comment chaque élément occupe l'espace sur la page. De l'intérieur vers l'extérieur : le content contient le texte ou les images, le padding est l'espace blanc à l'intérieur de la bordure (entre le contenu et la bordure), le border est la ligne entourant l'élément, et la margin est l'espace externe après la bordure. Ces propriétés peuvent être définies individuellement pour chaque côté (top, right, bottom, left) ou ensemble.
La propriété margin accepte une, deux ou quatre valeurs. Une seule valeur s'applique à tous les côtés ; deux valeurs définissent la marge verticale (haut/bas) et horizontale (droite/gauche) ; quatre valeurs appliquent les marges dans l'ordre : haut, droite, bas, gauche. Par exemple, margin-bottom: 30px; ajoute une marge uniquement sous l'élément. La propriété padding fonctionne identiquement. La propriété border combine l'épaisseur (en pixels), le style (solid, dashed, dotted) et la couleur : border: 1px solid blue;.
Un cas courant : le body a souvent des marges par défaut du navigateur. Pour les supprimer, on utilise body { margin: 0; padding: 0; }. On peut aussi utiliser border-collapse sur les tableaux pour fusionner les bordures des cellules adjacentes, créant un aspect plus épuré. Maîtriser le modèle de boîte est essentiel pour créer des mises en page précises et cohérentes.
En résumé
Ce cours explique le modèle de boîte HTML, composé du contenu, du padding (espace interne), de la bordure et de la margin (espace externe). Vous apprendrez à manipuler ces éléments avec une, deux ou quatre valeurs, et à utiliser les propriétés spécifiques comme margin-right, padding-bottom et border-top. Des exemples pratiques montrent comment ajouter des espaces et des bordures aux éléments de votre page.
Points clés
- Le modèle de boîte comprend le contenu, le padding, la bordure et la margin
- Padding = espace entre le contenu et la bordure; margin = espace extérieur à la bordure
- Vous pouvez définir les marges et paddings avec 1, 2 ou 4 valeurs (tous les bords, haut/bas + droite/gauche, ou chaque côté individuellement)
- Les propriétés spécifiques (margin-top, padding-left, border-right, etc.) permettent de cibler un seul côté
- Les bordures se définissent avec trois valeurs : épaisseur (1px), style (solid, dashed, dotted) et couleur (ex: blue)
- Le body a des marges par défaut qu'il faut réinitialiser à 0 pour éviter les espaces blancs non désirés
Questions fréquentes
Quelle est la différence entre margin et padding ?
Le padding est l'espace interne entre le contenu et sa bordure, tandis que la margin est l'espace externe à l'extérieur de la bordure.
Comment appliquer une margin différente sur chaque côté ?
Utilisez quatre valeurs dans cet ordre : haut, droite, bas, gauche. Par exemple, margin: 0px 30px 10px 15px; applique 0 en haut, 30px à droite, 10px en bas et 15px à gauche.
Comment définir une bordure simple en CSS ?
Utilisez la propriété border avec trois valeurs : border: 1px solid blue; où 1px est l'épaisseur, solid est le style (peut être dashed ou dotted), et blue est la couleur.