Cours IT Bases CSS 025_Marges et Remplissage

Marges

En CSS, les marges et le remplissage sont deux concepts différents, tous deux utilisés pour contrôler l’espace entre les éléments et influencer la mise en page.

Marge (Marge extérieure)

La marge (margin) désigne l’espace entre un élément et ses éléments adjacents. Les marges peuvent être utilisées pour contrôler la distance entre les éléments et influencer la mise en page. Les marges n’ont pas de couleur de fond, sont complètement transparentes et n’affectent pas la taille réelle de l’élément. Elles peuvent être des valeurs positives ou négatives, l’unité peut être des pixels (px), des pourcentages (%), em, etc.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Effet : On peut utiliser margin-top, margin-right, margin-bottom, margin-left pour définir la marge d’une direction spécifique individuellement.

Exemple :

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

Effet :

Remplissage (Marge intérieure)

Le remplissage (padding) désigne l’espace entre le contenu interne d’un élément et la bordure de l’élément. Le remplissage peut être utilisé pour ajuster la distance entre le contenu interne et la bordure, affectant la taille et la mise en page de l’élément. Le remplissage hérite de la couleur de fond de l’élément et affecte la taille réelle de l’élément. Les valeurs négatives ne sont pas prises en charge, l’unité peut être des pixels (px), des pourcentages (%), em, etc.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">Test du padding</div>
2
    <br>
3
    <div class="base example2">Test du padding</div>
4
    <br>
5
    <div class="base example3">Test du padding</div>

Effet :

On peut utiliser padding-top, padding-right, padding-bottom, padding-left pour définir le remplissage d’une direction spécifique individuellement.

Exemple :

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">Test du padding</div>

Effet :