Summary  
This chapter explains the CSS box model, showing how to control element spacing with padding and margin, define borders (including shorthand versus individual side properties), and apply different border styles.

General domain of usage  
Front-end web development

You know that every element has content, padding, border, and margin. Let's see how to control spacing using those properties.

## Padding
Padding creates space **inside** the element, between the content and the border.
```css
.box {
  padding: 20px;
}
```
This applies 20px of padding on all four sides.

### Padding Shorthand
Padding can be written using shorthand syntax.

The order of values is always: top → right → bottom → left

```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 */
```

### Individual Padding Properties

You can also control each side separately:
```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
```

## Margin
Margin creates space **outside** the element, between it and other elements.
```css
.box {
  margin: 20px;
}
```



### Margin Shorthand
Margin follows the same shorthand rules as padding:

```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 */
```

### Individual Margin Properties
Can also be set individually:
```css
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
```


## Border
The border sits **between** padding and margin.

Basic shorthand:
```css
border: 4px solid brown;
```
This defines: width, style, color.

Common border styles include `solid`, `dotted`, `dashed`, and `double`.

You can also control individual sides if needed:
```css
border-top: 2px solid black;
```

Let's consider the following example and figure out the possible border styles:



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>Solid Border</h3>
        <p>A classic, clean solid line used in most UI elements.</p>
      </div>

      <div class="card box-two">
        <h3>Dotted Border</h3>
        <p>Used for outlines, notes, or decorative elements.</p>
      </div>

      <div class="card box-three">
        <h3>Dashed Border</h3>
        <p>Often seen in editable fields or "drag here" zones.</p>
      </div>

      <div class="card box-four">
        <h3>Double Border</h3>
        <p>Stylish and bold - used for emphasis or framing.</p>
      </div>
    </div>
  </body>
</html>


Padding:
- Adds space inside the element;
- Expands the background area.

Margin:
- Adds space outside the element;
- Does not affect the element's background.

Key Difference

Which side receives `40px` in the following declaration?

Which property adds space inside an element, between its content and border?

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.

Margin and Padding Made Simple

Padding

Padding Shorthand

Individual Padding Properties

Margin

Margin Shorthand

Individual Margin Properties

Border

Output

1. Which side receives `40px` in the following declaration?

2. Which property adds space inside an element, between its content and border?