PhpBB Lab Académie

Continuer avec le même petit site et la même feuille styles.css, comprendre la différence entre l’espace extérieur créé par margin et l’espace intérieur créé par padding, appliquer ces propriétés aux vraies sections de la page d’accueil et préparer la compréhension du modèle de boîte CSS.

Avant de commencer

À la fin du chapitre précédent, votre feuille

styles.css

pouvait être organisée ainsi :

/* Base typographique */

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

/* Titres */

h1 {
    color: #163b65;
    font-size: 2rem;
}

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

h3 {
    color: #163b65;
    font-size: 1.25rem;
}

/* Identité du site */

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

Nous avons donc une typographie cohérente, une palette limitée et une hiérarchie visuelle claire.

Regardons maintenant la page :

index.html

Elle contient plusieurs sections :

Ce que j’ai appris

Mes notes de progression

Mon espace de travail

Les pages de mon site

Ces parties sont correctement structurées en HTML.

Mais elles peuvent encore sembler proches les unes des autres.

Nous allons maintenant apprendre à créer de l’espace sans ajouter de lignes vides dans le document HTML.

Dans cette leçon, nous allons répondre à quatre questions :

- Comment créer de l’espace entre deux éléments ?
- Comment créer de l’espace entre le contenu et les limites d’un élément ?
- Quelle différence existe entre

margin

et

padding

?
- Pourquoi les espacements doivent-ils être gérés avec CSS plutôt qu’avec du contenu vide dans HTML ?

À la fin de cette leçon, les vraies sections de notre page d’accueil seront mieux séparées et nous aurons préparé la compréhension du modèle de boîte CSS.

1. Pourquoi avons-nous besoin d’espacement ?

Prenons les sections de

index.html

.

Elles contiennent des titres, des paragraphes, des listes, des articles, une image et un tableau.

La structure est correcte.

Mais une bonne structure HTML ne définit pas automatiquement tous les espacements visuels dont nous avons besoin.

CSS va nous permettre de préciser ces distances.

Nous allons découvrir deux propriétés fondamentales :

margin

et :

padding

Elles créent toutes les deux de l’espace.

Mais elles ne le créent pas au même endroit.

2. Commencer par margin

La propriété :

margin

permet de créer de l’espace à l’extérieur d’un élément.

Pour notre premier exemple, nous allons utiliser une propriété plus précise :

margin-bottom

Elle permet de créer une marge sous un élément.

Nous allons l’appliquer aux vraies sections de la page d’accueil.

3. Ajouter un espace sous chaque section

Dans

styles.css

, ajoutez un nouveau groupe :

/* Sections */

section {
    margin-bottom: 2rem;
}

Enregistrez puis actualisez :

index.html

Les sections doivent maintenant être davantage séparées verticalement.

Nous avons utilisé :

2rem

Vous connaissez déjà l’unité

rem

depuis le chapitre précédent.

Ici, elle ne sert plus à définir une taille de texte.

Elle sert à définir une distance.

4. Comprendre margin-bottom

Reprenons :

section {
    margin-bottom: 2rem;
}

Le sélecteur :

section

cible les éléments

section

.

La propriété :

margin-bottom

crée de l’espace extérieur sous chacun de ces éléments.

La valeur :

2rem

définit la quantité d’espace.

Nous pouvons donc lire :

Après chaque section, laisse un espace extérieur de 2rem.

5. Observer réellement l’effet de la marge

Pour bien comprendre son rôle, remplacez temporairement :

2rem

par :

4rem

Vous obtenez :

section {
    margin-bottom: 4rem;
}

Enregistrez puis actualisez

index.html

.

La distance entre les sections devient beaucoup plus importante.

Remettez ensuite :

2rem

et enregistrez.

Cette expérience montre que

margin-bottom

agit sur l’espace entre un élément et ce qui vient après lui.

6. Pourquoi ne pas ajouter des lignes vides dans HTML ?

Pour créer de l’espace, nous pourrions être tentés d’ajouter des éléments vides ou plusieurs retours à la ligne dans HTML.

Par exemple, évitez de construire une présentation avec :

<br>
<br>
<br>

simplement pour éloigner deux parties de la page.

Le rôle de HTML est de décrire la structure et le sens du contenu.

Le rôle de CSS est de contrôler sa présentation.

Pour créer un espacement visuel, nous utiliserons donc des propriétés CSS comme :

margin

et :

padding

plutôt que du contenu vide.

7. Découvrir padding

Nous allons maintenant créer un autre type d’espace.

La propriété :

padding

crée de l’espace à l’intérieur d’un élément, autour de son contenu.

Pour rendre cet espace plus facile à observer, nous allons d’abord donner un arrière-plan léger à nos sections.

Nous connaissons déjà :

background-color

Ajoutez dans la règle :

background-color: #f3f4f6;

Vous obtenez :

section {
    margin-bottom: 2rem;
    background-color: #f3f4f6;
}

Enregistrez puis actualisez

index.html

.

Les limites visuelles de chaque section deviennent plus faciles à repérer grâce à l’arrière-plan clair.

8. Vérifier le contraste sur le nouvel arrière-plan

Nous avons changé l’arrière-plan des sections.

Nous devons donc vérifier que les couleurs de texte restent suffisamment lisibles sur :

#f3f4f6

Le texte courant :

#1f2937

sur cet arrière-plan possède un contraste d’environ :

13.34:1

La couleur des titres :

#163b65

possède un contraste d’environ :

10.33:1

Ces valeurs restent élevées.

Nous pouvons donc poursuivre avec cet arrière-plan clair.

Cette vérification reprend l’habitude apprise dans la leçon précédente :

nouvel arrière-plan = nouvelle vérification du contraste

9. Ajouter padding

Ajoutez maintenant :

padding: 1rem;

La règle devient :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
}

Enregistrez puis actualisez la page.

Le contenu des sections ne doit plus être aussi proche des limites visibles de leur arrière-plan.

Nous avons créé de l’espace à l’intérieur de chaque section.

10. Comprendre padding

Dans :

padding: 1rem;

la propriété est :

padding

La valeur est :

1rem

Lorsque nous donnons une seule valeur à

padding

, cette valeur s’applique ici aux quatre côtés :

haut

droite

bas

gauche

Nous pouvons donc lire :

À l’intérieur de la section, laisse 1rem d’espace autour du contenu.

11. Comparer margin et padding

Reprenons la règle complète :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
}

Les deux propriétés créent de l’espace.

Mais pas au même endroit.

Retenez :

margin = espace extérieur

padding = espace intérieur

Dans notre exemple :

margin-bottom: 2rem;

sépare une section de ce qui vient après elle.

Et :

padding: 1rem;

éloigne le contenu des limites de la section.

12. Une image mentale simple

Imaginez une boîte contenant du texte.

Le contenu se trouve au centre.

Autour du contenu, nous pouvons laisser un espace intérieur :

padding

À l’extérieur de cette boîte, nous pouvons laisser de l’espace avant les éléments voisins :

margin

Pour le moment, retenez cette distinction simple.

Dans la prochaine leçon, nous ajouterons une bordure visible.

Elle nous permettra de distinguer encore plus clairement :

- le contenu ;
- l’espace intérieur ;
- la bordure ;
- l’espace extérieur.

13. Tester padding avec une autre valeur

Pour observer son effet, remplacez temporairement :

padding: 1rem;

par :

padding: 2rem;

Enregistrez puis actualisez

index.html

.

Le contenu doit maintenant se trouver plus loin des limites visibles de la section.

Remettez ensuite :

padding: 1rem;

Cette expérience montre que

padding

ne crée pas principalement de distance entre les sections.

Il crée de l’espace autour du contenu à l’intérieur de chaque section.

14. Ne pas choisir des espacements au hasard

Nous pourrions utiliser :

0.7rem
1.3rem
2.6rem
3.1rem

pour différents éléments.

CSS l’accepterait.

Mais une accumulation de valeurs sans logique rendrait la feuille plus difficile à comprendre.

Pour le moment, nous conservons des valeurs simples :

1rem

pour l’espace intérieur,

et :

2rem

pour l’espace entre les sections.

Nous construirons progressivement une logique d’espacement plutôt que de choisir une nouvelle valeur pour chaque élément.

15. Les espacements ne doivent pas casser la lecture

Un espacement trop faible peut rendre plusieurs blocs difficiles à distinguer.

Un espacement trop important peut au contraire donner l’impression que des contenus liés n’appartiennent plus au même ensemble.

Notre objectif n’est donc pas :

mettre le plus d’espace possible

mais :

utiliser l’espace pour rendre la structure plus facile à percevoir

Les espacements doivent accompagner la structure HTML.

Ils ne doivent pas essayer de la remplacer.

16. Vérifier la section Mes notes de progression

Regardez particulièrement :

Mes notes de progression

Cette section contient deux

article

:

Ma première page complète

Mon formulaire de contact

La règle

section

ajoute un espace intérieur autour de tout ce contenu.

Elle ne modifie pas encore l’espacement entre les deux articles eux-mêmes.

Nous pourrions le faire plus tard si le besoin se présente.

Pour le moment, nous nous concentrons sur la différence entre l’intérieur et l’extérieur d’une section.

17. Vérifier la section Mon espace de travail

Regardez ensuite :

Mon espace de travail

Cette section contient :

- un titre ;
- un paragraphe ;
- l’image

ordinateur.jpg

.

Le

padding

crée un espace autour de cet ensemble à l’intérieur de la section.

Le

margin-bottom

sépare ensuite cette section de :

Les pages de mon site

Nous utilisons donc exactement les mêmes propriétés sur un contenu différent sans créer une règle particulière pour chaque section.

18. Vérifier la section Les pages de mon site

La section :

Les pages de mon site

contient le tableau construit dans le cours HTML.

Le même

padding

crée de l’espace entre le contenu de cette section et ses limites.

Nous ne modifions pas encore le tableau lui-même.

Chaque nouvelle notion est appliquée progressivement.

Nous travaillerons sur d’autres éléments lorsqu’un besoin précis apparaîtra.

19. Organiser styles.css

Nous avons déjà appris à utiliser des commentaires pour organiser la feuille.

Nous pouvons conserver :

/* Base typographique */

/* Titres */

/* Identité du site */

et ajouter :

/* Sections */

La fin de la feuille devient :

/* Sections */

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
}

Le commentaire décrit le groupe de règles.

Il ne répète pas chaque propriété.

20. Notre feuille styles.css à la fin de la leçon

Votre fichier peut maintenant contenir :

/* Base typographique */

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

/* Titres */

h1 {
    color: #163b65;
    font-size: 2rem;
}

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

h3 {
    color: #163b65;
    font-size: 1.25rem;
}

/* Identité du site */

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

/* Sections */

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
}

Nous avons conservé toutes les règles précédentes.

Nous avons simplement ajouté un nouveau groupe consacré aux sections de la page.

21. Vérifier le zoom

Augmentez de nouveau le zoom du navigateur.

Vérifiez :

- que les sections restent compréhensibles ;
- que le contenu ne se superpose pas ;
- que le

padding

ne provoque pas la disparition d’informations ;
- que les sections peuvent prendre davantage de hauteur sans problème ;
- que le tableau et l’image restent accessibles dans leur section.

Nous n’avons pas encore commencé à gérer les dimensions ou la mise en page responsive.

Mais nos espacements ne doivent pas créer de problème évident lorsque le contenu est agrandi.

22. Ce que nous n’avons pas encore étudié

Nous savons maintenant distinguer :

espace extérieur = margin

espace intérieur = padding

Mais une partie importante manque encore dans notre représentation de la boîte.

Nous n’avons pas étudié :

la bordure

Nous n’avons pas non plus expliqué précisément comment le navigateur considère la largeur totale d’un élément avec son contenu, son padding et sa bordure.

Ces notions arriveront progressivement.

23. Préparer la prochaine étape

Dans cette leçon, l’arrière-plan :

#f3f4f6

nous a aidés à voir la zone occupée par une section.

Dans la prochaine leçon, nous ajouterons une bordure.

Cette bordure nous permettra de distinguer plus précisément les différentes parties d’une boîte CSS.

Nous pourrons alors représenter :

contenu

padding

bordure

margin

et comprendre ce que l’on appelle :

le modèle de boîte CSS

24. Ce que vous devez comprendre avant la prochaine leçon

Vous devez maintenant être capable d’expliquer :

- pourquoi nous utilisons CSS pour créer de l’espace ;
- pourquoi nous n’ajoutons pas des éléments

br

uniquement pour espacer la page ;
- ce que fait

margin-bottom

;
- ce que fait

padding

;
- la différence entre espace extérieur et espace intérieur ;
- pourquoi une seule valeur de

padding

s’applique ici aux quatre côtés ;
- pourquoi nous utilisons une logique simple de valeurs comme

1rem

et

2rem

;
- pourquoi nous avons vérifié le contraste après avoir ajouté un nouvel arrière-plan ;
- pourquoi les espacements doivent accompagner la structure HTML ;
- comment la nouvelle règle

section

s’intègre dans notre feuille existante.

Dans la prochaine leçon, nous conserverons exactement ce même site et cette même règle

section

.

Nous ajouterons une bordure et nous construirons progressivement une représentation complète du modèle de boîte CSS.

Reprenons une vraie section de la page d’accueil :

<section>
    <h2>Mon espace de travail</h2>
    <p>J’utilise un ordinateur et un éditeur de texte pour écrire mes fichiers HTML.</p>
    <img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">
</section>

Nous ne modifions pas son HTML.

Dans

styles.css

, nous ajoutons :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
}

La propriété :

margin-bottom

crée un espace extérieur sous la section.

La propriété :

padding

crée un espace intérieur autour du contenu.

L’arrière-plan clair nous aide à observer cette différence.

Nous améliorons donc la présentation d’un élément déjà présent dans le fil rouge sans créer de contenu artificiel.

Continuez avec le même petit site et le même fichier

styles.css

.

1. Ajouter le groupe Sections

À la fin de la feuille, ajoutez :

/* Sections */

section {
    margin-bottom: 2rem;
}

Enregistrez puis actualisez

index.html

.

Observez la distance entre les sections.

2. Tester une marge plus grande

Remplacez temporairement :

margin-bottom: 2rem;

par :

margin-bottom: 4rem;

Actualisez la page.

Remettez ensuite :

2rem

et enregistrez.

3. Ajouter un arrière-plan léger

Dans la même règle, ajoutez :

background-color: #f3f4f6;

Vous obtenez :

section {
    margin-bottom: 2rem;
    background-color: #f3f4f6;
}

Cet arrière-plan vous permet de mieux observer la zone occupée par chaque section.

4. Ajouter padding

Ajoutez maintenant :

padding: 1rem;

La règle devient :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
}

Enregistrez puis actualisez la page.

5. Tester un padding plus grand

Remplacez temporairement :

padding: 1rem;

par :

padding: 2rem;

Observez la différence.

Remettez ensuite :

padding: 1rem;

6. Vérifier trois sections réelles

Regardez successivement :

Mes notes de progression

Mon espace de travail

Les pages de mon site

Pour chacune, identifiez :

- l’espace intérieur créé par

padding

;
- l’espace extérieur sous la section créé par

margin-bottom

.

7. Tester le zoom

Augmentez le zoom du navigateur.

Vérifiez que les sections restent lisibles et que le contenu ne se superpose pas.

8. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. la différence entre

margin

et

padding

;
2. pourquoi nous avons utilisé

margin-bottom

sur les sections ;
3. pourquoi une seule valeur de

padding

crée ici de l’espace sur les quatre côtés ;
4. pourquoi nous n’utilisons pas plusieurs

br

pour espacer les sections ;
5. pourquoi nous avons ajouté temporairement un arrière-plan visible ;
6. quelle nouvelle partie du modèle de boîte sera étudiée dans la prochaine leçon.

Dans cette leçon, nous avons commencé à travailler sur les espacements.

Nous avons ajouté :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
}

La propriété :

margin-bottom

crée ici un espace extérieur sous la section.

La propriété :

padding

crée un espace intérieur autour de son contenu.

Nous pouvons retenir :

margin = espace extérieur

padding = espace intérieur

Nous utilisons CSS pour gérer ces distances plutôt que d’ajouter du contenu vide dans HTML.

Nous avons également conservé une logique simple avec :

1rem

pour l’espace intérieur et :

2rem

pour l’espace extérieur entre les sections.

Enfin, l’ajout d’un nouvel arrière-plan nous a conduits à vérifier de nouveau le contraste.

Dans la prochaine leçon, nous conserverons exactement cette règle

section

.

Nous ajouterons une bordure afin de distinguer encore plus clairement le contenu, le padding, la bordure et la marge, puis nous construirons le modèle de boîte CSS.