Chapitre 105 | Padding et Margin – CDUI <code is my friend>

Padding et Margin

Dans une structure HTML, un conteneur parent peut contenir un ou plusieurs éléments enfants. Ces éléments sont disposés à l’intérieur du parent en fonction de deux notions fondamentales en CSS : la marge interne (padding) et la marge externe (margin).

La marge interne (padding) : il s’agit de l’espace situé entre le contenu de l’enfant (comme du texte) et les bords intérieurs du conteneur parent. Elle agrandit visuellement l’espace autour du contenu sans modifier la distance entre le parent et les autres éléments.
La marge externe (margin) : il s’agit de l’espace situé à l’extérieur du conteneur parent. Elle détermine la distance entre le parent et d’autres éléments dans la page.

Ainsi, le padding agit à l’intérieur du conteneur pour espacer le contenu, tandis que le margin agit à l’extérieur pour espacer le conteneur lui-même. Ces deux propriétés sont essentielles pour organiser et styliser des éléments dans une page web.

En CSS, un stack layout désigne une disposition où les éléments
sont empilés verticalement ou horizontalement les uns après les autres,
souvent avec un espacement uniforme ou personnalisé.

Exercice : Comprendre la différence entre padding et margin

Dans cet exercice, vous allez manipuler des valeurs de padding (marges internes) et de margin (marges externes) pour comprendre leur impact sur l’affichage.

Code de départ

! Veuillez Utiliser CodePen !

Voici le code initial en HTML et CSS :

<body>
<div class="enfant">
  <p class="petit-enfant">
  Children
  </p>
</div>

<div class="enfant enfant2">
  <p class="petit-enfant">
  Children
  </p>
</div>
</body>

/* ne pas modifier le code suivant */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: grey;
}

.enfant {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: yellow;
}

p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: aquamarine;
}

/* vous pouvez modifier le code à partir de là et jouer avec les paddings et les margins */
body {
    margin: unset; /* Modifier cette valeur pour tester */
}

.enfant {
    padding: unset; /* Modifier cette valeur pour tester */
}

.petit-enfant {
    padding: unset; /* Modifier cette valeur pour tester */
}

.enfant2 {
    margin-top: unset; /* Modifier cette valeur pour tester */
}

En CSS, la valeur unset supprime une propriété en la remettant soit à sa valeur par défaut (soit à sa valeur héritée) selon le contexte.

Attention :

Veuillez ne modifier le CSS qu’à partir de la ligne indiquée. Ne modifiez rien avant cette ligne.



/* vous pouvez modifier le code à partir de là et jouer avec les paddings et les margins */

Étape 1 : Ajouter une marge externe au body

Objectif : observer comment la marge externe du body agit sur l’espacement du conteneur principal.

Ajouter une valeur pour la propriété margin dans body
body { margin: 40px; }
Rendu attendu : les conteneurs (.enfant) sont espacés du bord de la fenêtre de 40 pixels.

Étape 2 : Ajouter un padding interne au conteneur `.enfant`

Objectif : observer comment le padding influence l’espace interne dans le premier conteneur.

Ajouter une valeur pour la propriété padding dans .enfant :
.enfant { padding: 20px; }
Rendu attendu : des espaces jaunes de 20 pixels apparaissent.

Étape 3 : Ajouter un padding interne au paragraphe `.petit-enfant`

Objectif : observer comment le padding agit à un niveau plus profond dans la hiérarchie.

Ajouter une valeur pour la propriété padding dans .petit-enfant
.petit-enfant { padding: 20px; }
Rendu attendu : l’espace entre le texte « Children » et les bords augmente de 20 pixels.

Étape 4 : Ajouter une marge externe au deuxième conteneur `.enfant2`

Objectif : observer comment une marge externe agit entre deux conteneurs voisins.

Ajouter une valeur pour la propriété margin-top dans .enfant2
.enfant2 { margin-top: 40px; }
Rendu attendu : un espace de 40 pixels apparaît entre le premier et le deuxième conteneur (.enfant et .enfant2).

Couleurs et leur signification :

body : gris (background-color: grey)
- Le body représente le conteneur principal de la page. Sa couleur de fond grise sert de repère visuel pour délimiter la zone où les autres conteneurs sont placés.
.enfant : jaune (background-color: yellow)
- Les conteneurs .enfant sont les éléments principaux à l’intérieur du body.
- La couleur jaune rend ces conteneurs immédiatement visibles sur le fond gris. Ils servent de base pour appliquer des paddings et marges.
p (ou .petit-enfant) : aquamarine (background-color: aquamarine)
- Le contenu textuel est situé à l’intérieur des conteneurs .enfant.
- La couleur aquamarine met en évidence le texte et permet de voir clairement l’espace créé par les paddings internes des conteneurs parents (.enfant) ou du paragraphe lui-même.

Étape 5 : Ajouter un contenu personnalisé

Objectif : insérer un nouveau conteneur dans le HTML, lui appliquer du texte personnalisé, et manipuler ses paddings et marges pour observer leur impact.

Vous voulez en savoir plus sur la première partie du CSS ?

Ce qui suit est un apprentissage optionnel pour un CDUI.

D’accord, je vais expliquer chaque règle spécifique de manière précise et détaillée, en évitant les généralisations. Voici la nouvelle version.

**1. Réinitialisation universelle : `* {padding:0;margin:0;box-sizing: border-box;}`**

Rôle :

L’astérisque (*) signifie « applique ce qui suit à tous les éléments de la page ».

padding: 0; et margin: 0; :
- Suppriment les paddings et marges par défaut appliqués par le navigateur, comme ceux du <body> ou des titres (h1, p).
- Cela garantit un contrôle total sur les espaces internes (paddings) et externes (marges) pour chaque élément.
box-sizing: border-box; :
- Change le mode de calcul des dimensions des éléments :
  - La largeur (width) et la hauteur (height) incluent les paddings et bordures.
  - Exemple : avec une largeur définie de 200px et un padding de 20px, la largeur totale reste 200px (et non 240px comme dans le modèle par défaut content-box).

Sans cette règle :

Les marges et paddings par défaut créeraient des espaces imprévus.
Le calcul des dimensions serait moins intuitif, car il faudrait additionner les paddings à la largeur et à la hauteur pour obtenir la taille réelle d’un élément.

2. `.enfant { display: flex; width: 100%; height: 100%; }`

Rôle précis :

display: flex; :
- Définit .enfant comme un conteneur flexbox.
- Cela active un modèle de disposition où :
 - Les enfants directs (par exemple, ) sont automatiquement placés en ligne (horizontalement) ou en colonne (verticalement).
 - Les enfants peuvent être alignés précisément grâce à des propriétés comme align-items ou justify-content.
width: 100%; et height: 100%; :
- Étendent le conteneur .enfant pour qu’il occupe :
  - 100 % de la largeur et de la hauteur disponibles dans son parent (body).
- Cela signifie que .enfant couvre tout l’espace défini par le body.

Sans cette règle :

Sans display: flex, le contenu () serait positionné selon le comportement par défaut (en haut à gauche pour un contenu en bloc).
Sans width: 100%; height: 100%;, .enfant n’occuperait que l’espace nécessaire pour son contenu (), ce qui rendrait les effets des paddings et marges moins visibles.

3. ` { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }`

Rôle précis :

display: flex; :
- Définit le paragraphe  comme un conteneur flexible.
- Active des propriétés comme align-items et justify-content pour aligner le texte « Children ».
align-items: center; :
- Centre le texte verticalement dans l’élément .
justify-content: center; :
- Centre le texte horizontalement dans l’élément .
width: 100%; et height: 100%; :
- Étendent le paragraphe  pour qu’il occupe tout l’espace disponible à l’intérieur de son parent (.enfant).
- Cela garantit que les paddings appliqués à  ou .enfant affectent toute la zone disponible.

Sans cette règle :

Sans display: flex; align-items: center; justify-content: center; :
- Le texte « Children » serait aligné par défaut en haut à gauche, ce qui rendrait difficile de visualiser les espaces créés par les paddings internes.
Sans width: 100%; height: 100%; :
- Le  aurait une taille minimale (uniquement celle requise pour afficher le texte), et les paddings appliqués au  n’auraient pas d’effet visible.

Résumé précis des règles spécifiques

Règle	Effet
`* {padding: 0; margin: 0;}`	Supprime les marges et paddings par défaut pour éviter des espaces imprévus.
`* {box-sizing: border-box;}`	Inclut paddings et bordures dans les dimensions définies, simplifiant le calcul des tailles.
`.enfant { display: flex; }`	Active la disposition flexbox pour les enfants directs de `.enfant`.
`.enfant { width: 100%; }`	Étend la largeur de `.enfant` à 100 % de son parent (`body`).
`.enfant { height: 100%; }`	Étend la hauteur de `.enfant` à 100 % de son parent (`body`).
`<p> { display: flex; }`	Active la disposition flexbox dans le paragraphe pour aligner son contenu.
`<p> { align-items: center; }`	Centre le contenu du paragraphe verticalement.
`<p> { justify-content: center; }`	Centre le contenu du paragraphe horizontalement.
`<p> { width: 100%; height: 100%; }`	Étend le paragraphe pour occuper tout l’espace disponible dans son parent (`.enfant`).

En respectant ces règles, le rendu visuel est cohérent et permet d’explorer facilement les effets des paddings et marges.

Chapitre 105 | Padding et Margin

Padding et Margin

Exercice : Comprendre la différence entre padding et margin

Code de départ

Attention :

Étape 1 : Ajouter une marge externe au body

Étape 2 : Ajouter un padding interne au conteneur .enfant

Étape 3 : Ajouter un padding interne au paragraphe .petit-enfant

Étape 4 : Ajouter une marge externe au deuxième conteneur .enfant2

Étape 5 : Ajouter un contenu personnalisé

Vous voulez en savoir plus sur la première partie du CSS ?

1. Réinitialisation universelle : * {padding:0;margin:0;box-sizing: border-box;}

Rôle :

Sans cette règle :

2. .enfant { display: flex; width: 100%; height: 100%; }

Rôle précis :

Sans cette règle :

3. <p> { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

Rôle précis :

Sans cette règle :

Résumé précis des règles spécifiques

Étape 2 : Ajouter un padding interne au conteneur `.enfant`

Étape 3 : Ajouter un padding interne au paragraphe `.petit-enfant`

Étape 4 : Ajouter une marge externe au deuxième conteneur `.enfant2`

**1. Réinitialisation universelle : `* {padding:0;margin:0;box-sizing: border-box;}`**

2. `.enfant { display: flex; width: 100%; height: 100%; }`

3. `<p> { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }`