Summary  
This chapter covers the CSS box model’s spacing properties—padding, margin, and border—including their shorthand syntax and individual side settings.

General domain of usage  
Web page layout design

Vous savez que chaque élément possède un contenu, un remplissage (padding), une bordure et une marge. Voyons comment contrôler l'espacement à l'aide de ces propriétés.

## Padding
Le padding crée un espace **à l'intérieur** de l'élément, entre le contenu et la bordure.
```css
.box {
  padding: 20px;
}
```
Cela applique 20px de padding sur les quatre côtés.

### Raccourci pour le padding
Le padding peut être écrit en utilisant une syntaxe abrégée.

L'ordre des valeurs est toujours : haut → droite → bas → gauche

```css
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
```

### Propriétés de remplissage individuelles

Vous pouvez également contrôler chaque côté séparément :
```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
```

## Marge
La marge crée un espace **à l'extérieur** de l'élément, entre celui-ci et les autres éléments.
```css
.box {
  margin: 20px;
}
```



### Raccourci pour la marge
La marge suit les mêmes règles de raccourci que le remplissage :

```css
margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
```

### Propriétés de marge individuelles
Peuvent également être définies individuellement :
```css
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
```


## Bordure
La bordure se situe **entre** le remplissage (padding) et la marge.

Raccourci de base :
```css
border: 4px solid brown;
```
Cela définit : largeur, style, couleur.

Les styles de bordure courants incluent `solid`, `dotted`, `dashed` et `double`.

Vous pouvez également contrôler chaque côté individuellement si nécessaire :
```css
border-top: 2px solid black;
```

Considérons l'exemple suivant et identifions les styles de bordure possibles :



PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJib3JkZXItc2hvd2Nhc2UiPgogICAgICA8ZGl2IGNsYXNzPSJjYXJkIGJveC1vbmUiPgogICAgICAgIDxoMz5Tb2xpZCBCb3JkZXI8L2gzPgogICAgICAgIDxwPkEgY2xhc3NpYywgY2xlYW4gc29saWQgbGluZSB1c2VkIGluIG1vc3QgVUkgZWxlbWVudHMuPC9wPgogICAgICA8L2Rpdj4KCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQgYm94LXR3byI+CiAgICAgICAgPGgzPkRvdHRlZCBCb3JkZXI8L2gzPgogICAgICAgIDxwPlVzZWQgZm9yIG91dGxpbmVzLCBub3Rlcywgb3IgZGVjb3JhdGl2ZSBlbGVtZW50cy48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iY2FyZCBib3gtdGhyZWUiPgogICAgICAgIDxoMz5EYXNoZWQgQm9yZGVyPC9oMz4KICAgICAgICA8cD5PZnRlbiBzZWVuIGluIGVkaXRhYmxlIGZpZWxkcyBvciAiZHJhZyBoZXJlIiB6b25lcy48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iY2FyZCBib3gtZm91ciI+CiAgICAgICAgPGgzPkRvdWJsZSBCb3JkZXI8L2gzPgogICAgICAgIDxwPlN0eWxpc2ggYW5kIGJvbGQgLSB1c2VkIGZvciBlbXBoYXNpcyBvciBmcmFtaW5nLjwvcD4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwouYm94LW9uZSB7CiAgYm9yZGVyOiAycHggc29saWQgYnJvd247Cn0KCi5ib3gtdHdvIHsKICBib3JkZXI6IDJweCBkb3R0ZWQgYnJvd247Cn0KCi5ib3gtdGhyZWUgewogIGJvcmRlcjogMnB4IGRhc2hlZCBicm93bjsKfQoKLmJveC1mb3VyIHsKICBib3JkZXI6IDRweCBkb3VibGUgYnJvd247Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwouYm9yZGVyLXNob3djYXNlIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKICBnYXA6IDMwcHg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWF4LXdpZHRoOiA5MDBweDsKfQoKLmNhcmQgewogIHdpZHRoOiAyMDBweDsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMDgpOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlOwp9CgpoMyB7CiAgbWFyZ2luLXRvcDogMDsKICBmb250LXNpemU6IDE4cHg7CiAgY29sb3I6ICMzMzM7Cn0KCnAgewogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzU1NTsKICBsaW5lLWhlaWdodDogMS41Owp9

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      .box-one {
        border: 2px solid brown;
      }

      .box-two {
        border: 2px dotted brown;
      }

      .box-three {
        border: 2px dashed brown;
      }

      .box-four {
        border: 4px double brown;
      }

      /* Additional styles for better appearance (not the current focus) */
      .border-showcase {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        max-width: 600px;
margin: auto;
      }

      .card {
        width: 200px;
        padding: 20px;
        border-radius: 12px;
        background-color: white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: transform 0.2s ease;
      }

      h3 {
        margin-top: 0;
        font-size: 18px;
        color: #333;
      }

      p {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <div class="border-showcase">
      <div class="card box-one">
        <h3>Bordure pleine</h3>
        <p>Une ligne pleine classique et épurée, utilisée dans la plupart des éléments d'interface.</p>
      </div>

      <div class="card box-two">
        <h3>Bordure en pointillés</h3>
        <p>Utilisée pour les contours, les annotations ou des éléments décoratifs.</p>
      </div>

      <div class="card box-three">
        <h3>Bordure en tirets</h3>
        <p>Souvent utilisée dans les champs éditables ou les zones « déposez ici ».</p>
      </div>

      <div class="card box-four">
        <h3>Bordure double</h3>
        <p>Élégante et marquée – utilisée pour mettre en valeur ou encadrer.</p>
      </div>
    </div>
  </body>
</html>


Padding :
- Ajoute de l'espace à l'intérieur de l'élément ;
- Agrandit la zone d'arrière-plan.

Marge :
- Ajoute de l'espace à l'extérieur de l'élément ;
- N'affecte pas l'arrière-plan de l'élément.

Différence clé

Quel côté reçoit `40px` dans la déclaration suivante ?

Quelle propriété ajoute de l'espace à l'intérieur d'un élément, entre son contenu et sa bordure ?

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Marge et Remplissage Simplifiés

Padding

Raccourci pour le padding

Propriétés de remplissage individuelles

Marge

Raccourci pour la marge

Propriétés de marge individuelles

Bordure

Sortie

1. Quel côté reçoit `40px` dans la déclaration suivante ?

2. Quelle propriété ajoute de l'espace à l'intérieur d'un élément, entre son contenu et sa bordure ?