PhpBB Lab Académie

Continuer avec le même petit site et la même règle section, ajouter une bordure aux vraies sections de la page d’accueil, comprendre les trois parties de la propriété border et construire une représentation claire du modèle de boîte CSS : contenu, padding, bordure et margin.

Avant de commencer

Dans la leçon précédente, nous avons commencé à travailler sur les espacements.

La règle consacrée aux sections pouvait être :

/* Sections */

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

Nous avons appris à distinguer :

margin = espace extérieur

padding = espace intérieur

L’arrière-plan clair nous a également aidés à observer la zone occupée par chaque section.

Mais il manque encore une limite précise entre :

l’intérieur de la section

et :

l’espace extérieur

Nous allons maintenant ajouter une bordure.

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

- Qu’est-ce qu’une bordure CSS ?
- Comment écrire une propriété

border

?
- Où se place la bordure par rapport au contenu, au padding et à la marge ?
- Qu’appelle-t-on le modèle de boîte CSS ?

À la fin de cette leçon, vous serez capable de représenter une section comme une véritable boîte composée de quatre zones principales.

1. Reprendre une vraie section du site

Regardons la section :

Mon espace de travail

dans

index.html

.

Elle contient notamment :

<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 ce HTML.

Nous allons uniquement compléter sa présentation dans :

styles.css

2. Ajouter une bordure

Dans la règle

section

, ajoutez :

border: 1px solid #6b7280;

La règle devient :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
    border: 1px solid #6b7280;
}

Enregistrez puis actualisez :

index.html

Chaque section doit maintenant être entourée d’une ligne.

Cette ligne correspond à la bordure.

3. Où se trouve la bordure ?

Nous avons maintenant trois éléments visuels faciles à distinguer :

le contenu

l’espace intérieur créé par padding

la bordure

Et à l’extérieur de cette bordure, nous conservons :

la marge

créée ici avec :

margin-bottom: 2rem;

Nous pouvons donc commencer à représenter la section ainsi :

extérieur
    margin
        bordure
            padding
                contenu

Cette représentation est volontairement simple.

Elle nous aide à comprendre l’ordre des différentes zones.

4. Comprendre la propriété border

Nous avons écrit :

border: 1px solid #6b7280;

Cette déclaration rassemble trois informations :

1px

solid

#6b7280

Elles correspondent à :

épaisseur

style

couleur

Nous allons les examiner une par une.

5. Comprendre 1px

La première valeur est :

1px

Elle définit ici l’épaisseur de la bordure.

L’unité :

px

correspond au pixel CSS.

Pour une bordure très fine, une valeur comme :

1px

est courante.

Dans notre petit site, cette valeur suffit pour rendre la limite visible sans créer un contour trop lourd.

6. Comprendre solid

La deuxième valeur est :

solid

Elle indique le style de la bordure.

Ici :

solid

signifie que la bordure forme une ligne continue.

CSS propose d’autres styles.

Mais nous n’avons pas besoin de les apprendre maintenant.

Pour notre projet, nous conserverons une bordure simple et continue.

7. Comprendre la couleur de la bordure

La troisième valeur est :

#6b7280

Elle définit la couleur de la bordure.

Nous utilisons une couleur suffisamment visible par rapport à l’arrière-plan :

#f3f4f6

La bordure n’a pas de rôle sémantique.

Elle sert ici à rendre les limites des sections plus faciles à percevoir visuellement.

La structure reste toujours définie par l’élément HTML :

section

8. Lire toute la déclaration

Nous pouvons maintenant lire :

border: 1px solid #6b7280;

ainsi :

crée une bordure

de 1px d’épaisseur

avec une ligne continue

de couleur #6b7280

Retenez l’ordre utilisé dans notre exemple :

border: épaisseur style couleur;

9. Tester une bordure plus épaisse

Pour observer clairement son emplacement, remplacez temporairement :

1px

par :

4px

Vous obtenez :

border: 4px solid #6b7280;

Enregistrez puis actualisez

index.html

.

La bordure devient beaucoup plus visible.

Remettez ensuite :

border: 1px solid #6b7280;

Cette expérience permet de repérer précisément la zone occupée par la bordure.

10. Retrouver le padding à l’intérieur de la bordure

Regardez maintenant le contenu d’une section.

Le titre et les autres éléments ne touchent pas directement la bordure.

Pourquoi ?

Parce que nous avons déjà :

padding: 1rem;

Le padding se trouve donc :

entre le contenu et la bordure

Retenez :

contenu
puis padding
puis bordure

11. Retrouver la marge à l’extérieur de la bordure

Nous avons également :

margin-bottom: 2rem;

Cette marge se trouve à l’extérieur de la bordure.

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

Nous pouvons maintenant compléter :

contenu
padding
bordure
margin

En partant du centre de la boîte vers l’extérieur.

12. Le modèle de boîte CSS

Cette organisation porte un nom :

le modèle de boîte CSS

Un élément peut être représenté comme une boîte composée de plusieurs zones.

Pour ce que nous étudions ici :

contenu

padding

bordure

margin

Nous pouvons la représenter simplement ainsi :

margin
    border
        padding
            contenu

Cette représentation sera très importante pour comprendre les dimensions dans la prochaine leçon.

13. Le contenu

Au centre se trouve :

le contenu

Dans la section :

Mon espace de travail

le contenu comprend notamment :

- le titre

h2

;
- le paragraphe ;
- l’image

ordinateur.jpg

.

CSS ne transforme pas ces éléments en une seule donnée.

Nous utilisons simplement le mot

contenu

pour désigner ce qui se trouve dans la zone intérieure de la boîte.

14. Le padding

Autour du contenu se trouve :

padding

Dans notre règle :

padding: 1rem;

crée un espace intérieur sur les quatre côtés.

Le contenu ne touche donc pas directement la bordure.

Cet espace appartient à l’intérieur visuel de la section.

15. La bordure

Autour du padding se trouve :

border

Dans notre projet :

border: 1px solid #6b7280;

dessine une limite visible autour de la section.

La bordure se trouve donc :

après le padding

et avant la marge

lorsque nous allons du centre vers l’extérieur.

16. La marge

À l’extérieur de la bordure se trouve :

margin

Nous utilisons ici uniquement :

margin-bottom: 2rem;

Nous créons donc une marge sous chaque section.

Cette zone sépare la boîte des éléments voisins.

La marge ne fait pas partie de l’arrière-plan visible de la section.

17. Observer l’arrière-plan

Notre section possède :

background-color: #f3f4f6;

Cette couleur apparaît derrière le contenu et le padding.

Elle nous permet donc de voir que le

padding

appartient à la zone intérieure de la boîte.

La marge reste à l’extérieur.

C’est une différence importante entre :

padding

et :

margin

18. Vérifier plusieurs sections du vrai projet

Observez successivement :

Ce que j’ai appris

Mes notes de progression

Mon espace de travail

Les pages de mon site

Ces quatre sections utilisent toutes la même règle :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
    border: 1px solid #6b7280;
}

Nous n’avons pas créé quatre règles différentes.

Les éléments ont le même rôle structurel et peuvent partager la même présentation.

19. La bordure ne remplace pas la structure HTML

Une bordure peut donner l’impression visuelle qu’un contenu forme un bloc.

Mais elle ne crée pas le sens de ce bloc.

Par exemple, nous n’écrivons pas :

<div>...</div>

simplement parce que nous voulons voir une bordure.

Nos contenus sont déjà correctement organisés avec :

section

parce qu’ils représentent de vraies parties thématiques de la page.

CSS ajoute ensuite une présentation à cette structure.

Retenez encore une fois :

HTML définit la structure.

CSS contrôle sa présentation.

20. Ne pas ajouter des bordures partout

Maintenant que vous connaissez

border

, vous pourriez être tenté d’ajouter un contour à :

- chaque paragraphe ;
- chaque titre ;
- chaque lien ;
- chaque image ;
- chaque cellule.

CSS le permettrait.

Mais une nouvelle propriété doit répondre à un besoin.

Dans notre cas, la bordure sert à rendre les limites des sections plus faciles à observer et à comprendre pendant l’apprentissage du modèle de boîte.

Nous n’ajouterons pas des contours simplement parce que nous savons maintenant le faire.

21. Organiser la règle section

Notre groupe reste :

/* Sections */

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
    border: 1px solid #6b7280;
}

Chaque déclaration a un rôle :

margin-bottom
= espace extérieur sous la section

padding
= espace intérieur

background-color
= arrière-plan de la section

border
= limite visible autour de la section

Nous commençons maintenant à pouvoir lire une boîte CSS de manière méthodique.

22. Vérifier le zoom

Augmentez le zoom du navigateur.

Vérifiez :

- que les sections peuvent s’agrandir en hauteur ;
- que le contenu ne se superpose pas ;
- que le texte reste lisible ;
- que la bordure reste autour du contenu ;
- que l’image et le tableau restent présents dans leur section.

La bordure ne doit pas nous conduire à fixer des dimensions trop petites.

Nous n’avons d’ailleurs encore défini aucune largeur précise pour les sections.

23. Une question nouvelle apparaît : quelle est la largeur de la boîte ?

Nous connaissons maintenant :

contenu
padding
bordure
margin

Mais imaginons que nous écrivions plus tard :

width: 40rem;

Une question importante apparaît :

Que mesure exactement cette largeur ?

Le contenu seulement ?

Le contenu avec le padding ?

La bordure est-elle comprise ?

Cette question devient essentielle dès que nous commençons à contrôler les dimensions.

Nous n’allons pas y répondre trop vite.

Elle sera le point de départ de la prochaine leçon.

24. Préparer la prochaine étape

Dans la prochaine leçon, nous continuerons avec les mêmes sections.

Nous étudierons :

width

max-width

box-sizing

Nous verrons comment contrôler une largeur sans empêcher le contenu de s’adapter.

Nous comprendrons également pourquoi le modèle de boîte que nous venons d’apprendre est indispensable pour interpréter correctement une largeur CSS.

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

Vous devez maintenant être capable d’expliquer :

- ce qu’est une bordure CSS ;
- comment lire

border: 1px solid #6b7280;

;
- le rôle de

1px

;
- le rôle de

solid

;
- le rôle de

#6b7280

;
- où se trouve le padding par rapport à la bordure ;
- où se trouve la marge par rapport à la bordure ;
- les quatre zones principales du modèle de boîte ;
- pourquoi une bordure visuelle ne remplace pas une structure HTML correcte ;
- pourquoi nous n’ajoutons pas des bordures sans besoin précis.

Retenez surtout l’ordre suivant en partant du contenu vers l’extérieur :

contenu
padding
bordure
margin

Dans la prochaine leçon, nous utiliserons ce modèle pour comprendre les dimensions avec

width

,

max-width

et

box-sizing

.

Reprenons la vraie section :

<section>
    <h2>Les pages de mon site</h2>
    <p>Le site contient actuellement trois pages principales.</p>
    ...
</section>

Son HTML ne change pas.

Dans

styles.css

, nous utilisons :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
    border: 1px solid #6b7280;
}

Nous pouvons lire cette boîte depuis le centre vers l’extérieur :

contenu
padding
bordure
margin

Le

padding

éloigne le contenu de la bordure.

La bordure rend la limite de la section visible.

La marge sépare la section de ce qui vient après elle.

Nous appliquons donc le modèle de boîte à un élément réel du projet.

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

styles.css

.

1. Reprendre la règle section

Vous devez déjà avoir :

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

Ne supprimez aucune de ces déclarations.

2. Ajouter la bordure

Ajoutez :

border: 1px solid #6b7280;

La règle devient :

section {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
    border: 1px solid #6b7280;
}

Enregistrez puis actualisez

index.html

.

3. Tester l’épaisseur

Remplacez temporairement :

1px

par :

4px

Observez la position de la bordure.

Remettez ensuite :

1px

et enregistrez.

4. Repérer les quatre zones

Sur la section :

Mon espace de travail

identifiez mentalement :

contenu
padding
bordure
margin

Repérez notamment que l’arrière-plan clair est visible dans la zone de padding.

5. Observer d’autres sections

Faites la même vérification avec :

Mes notes de progression

Les pages de mon site

Les sections partagent toutes la même règle.

6. Tester le zoom

Augmentez le zoom du navigateur.

Vérifiez que les boîtes peuvent s’agrandir sans faire disparaître leur contenu.

7. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. les trois informations contenues dans

border: 1px solid #6b7280;

;
2. l’ordre du modèle de boîte en partant du contenu vers l’extérieur ;
3. où se trouve le

padding

;
4. où se trouve la bordure ;
5. où se trouve la marge ;
6. pourquoi une bordure CSS ne donne pas à elle seule un sens structurel au contenu ;
7. pourquoi la prochaine leçon devra tenir compte du modèle de boîte pour travailler sur la largeur.

Dans cette leçon, nous avons complété la règle des sections avec :

border: 1px solid #6b7280;

Cette déclaration contient trois informations :

1px = épaisseur

solid = style

#6b7280 = couleur

Nous avons ensuite construit le modèle de boîte CSS.

En partant du contenu vers l’extérieur :

contenu
padding
bordure
margin

Le

padding

crée l’espace intérieur.

La bordure entoure cette zone.

La marge se trouve à l’extérieur de la bordure.

Nous avons appliqué ces notions aux vraies sections de

index.html

, sans créer de contenu artificiel.

Dans la prochaine leçon, nous garderons exactement ces boîtes et nous étudierons :

width
max-width
box-sizing

afin de comprendre et de contrôler leurs dimensions sans casser l’adaptation du contenu.