Le modèle de boite CSS

Index général
Introduction au Web Page Web de base Introduction à HTML Introduction à CSS Les tableaux
Les images Les listes Les hyperliens Les couleurs Les attributs ID et CLASS
Les éléments DIV et SPAN Éléments structurants Mise en page en colonnes Éléments de types block et inline Le modèle de boîte CSS
Les unités de mesures CSS Les sélecteurs CSS Les grilles CSS Introduction aux formulaires Suppléments pour PFI

Dernière mise à jour le 30 octobre 2022

Le modèle de boîte CSS

Lorsqu'il est question de styles et d'affichage, tous les éléments HTML peuvent être considérés comme des boîtes, c'est ce qu'on appelle le "modèle de boîte CSS".

La boîte virtuelle qui englobe tout élément est formée...

Modèle de boîte CSS
Source: pierre-giraud.com

Le contenu est l'élément lui-même : texte, image, etc.

Le remplissage

Le remplissage est l'espace transparent entre le contenu et la bordure.

On peut spécifier la taille du remplissage à l'aide des propriétés suivantes :

Notation abrégée

Il existe une notation abrégée qui s'utilise de plusieurs façons.

Exemples :

Déclaration top right bottom left
padding: 25px 50px 75px 100px; 25px 50px 75px 100px
padding: 25px 50px 75px; 25px 50px 75px 50px
padding: 25px 50px; 25px 50px 25px 50px
padding: 25px; 25px 25px 25px 25px

La bordure

La bordure s'étend autour du contenu et du remplissage.

On peut spécifier les caractéristiques de la bordure à l'aide des propriétés suivantes :

La marge

La marge est l'espace transparent entre la bordure et l'élément conteneur.

On peut spécifier la taille de la marge à l'aide des propriétés suivantes :

Notation abrégée

Comme pour le remplissage (padding), il existe une notation abrégée :

Déclaration top right bottom left
margin: 25px 50px 75px 100px; 25px 50px 75px 100px
margin: 25px 50px 75px; 25px 50px 75px 50px
margin: 25px 50px; 25px 50px 25px 50px
margin: 25px; 25px 25px 25px 25px

Un exemple

Le modèle de boîte permet d'ajouter une bordure aux éléments et de définir l'espace qui sépare les éléments.

Exemple 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Le modèle de boîte CSS</title>
    <style>
      div {
        background-color: yellow;
        padding: 20px;
        border-color: green;
        border-style: dashed;
        border-width: 10px;
        /* border: green dashed 10px; */
        margin: 40px;
      }
    </style>
</head>
<body>
  <p>
    Cet exemple illustre le modèle de boîte. On y
    remarque le contenu (texte), le remplissage,
    la bordure et la marge.
  </p>
  
  <div>
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Duis tempor, metus et
    fringilla tincidunt, ex ex porta sapien,
    tincidunt vulputate orci lacus quis neque.
  </div>

</body>
</html>
Je teste