Exercice 6/25

  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 6/25

Maintenant que vous connaissez les propriétés d'affichage et le modèle de boîte, plongeons-nous dans les détails concernant le comportement individuel des boîtes.

  • La marge externe : margin est l'espace entourant un élément. Plus la marge d'un élément est grande, plus la distance entre cet élément et ceux qui l'entourent sera grande. Nous pouvons ajuster la marge pour rapprocher ou éloigner nos éléments HTML les uns des autres;
  • La marge interne : padding est l'espace entre le contenu d'un élément et sa bordure. Nous pouvons ajuster cette valeur avec CSS pour placer les bordures plus ou moins loin du contenu;
  • La bordure : border est la bordure de chaque élément (entre margin et padding). C'est ce que l'on rend visible en utilisant la propriété border;
  • Le contenu : content est le contenu de la boîte. Par exemple, si on parle d'un élément p, le contenu sera le texte du paragraphe.

Dans l'illustration de cet exercice, il y a des abbréviations TM, TB, TP ils correspondent respectivement aux propriétés "top margin", "top border" et "top padding", soit "marge externe du haut", "bordure du haut" et "marge interne du haut.
Vous verrez qu'il est tout à fait possible de spécifier des valeurs différentes pour le haut, le bas, la gauche et la droite concernant toutes ces propriétés.Maintenant que vous connaissez les propriétés d'affichage et le modèle de boîte, plongeons-nous dans les détails concernant le comportement individuel des boîtes.

  • La marge externe : margin est l'espace entourant un élément. Plus la marge d'un élément est grande, plus la distance entre cet élément et ceux qui l'entourent sera grande. Nous pouvons ajuster la marge pour rapprocher ou éloigner nos éléments HTML les uns des autres;
  • La marge interne : padding est l'espace entre le contenu d'un élément et sa bordure. Nous pouvons ajuster cette valeur avec CSS pour placer les bordures plus ou moins loin du contenu;
  • La bordure : border est la bordure de chaque élément (entre margin et padding). C'est ce que l'on rend visible en utilisant la propriété border;
  • Le contenu : content est le contenu de la boîte. Par exemple, si on parle d'un élément p, le contenu sera le texte du paragraphe;

Dans l'illustration de cet exercice, il y a des abréviations TM, TB, TP ils correspondent respectivement aux propriétés "top margin", "top border" et "top padding", soit "marge externe du haut", "bordure du haut" et "marge interne du haut.
Vous verrez qu'il est tout à fait possible de spécifier des valeurs différentes pour le haut, le bas, la gauche et la droite concernant toutes ces propriétés.

Commentaires les mieux notés

14 Commentaires

  • mathieuconstantin01-17

    mathieuconstantin01-17

    Bonjour, le texte de la leçon est écrit en double, c'est normal?

    le 20/01/2023 à 07h49

  • Patricio M

    Patricio M Admin

    Merci pour le commentaire, on va essayer de régler cela

    le 20/01/2023 à 10h12

  • formationevelyne-33

    formationevelyne-33

    Il n'y a pas un problème sur leçon 5 et 6 les textes sont répétés deux fois !

    le 28/02/2022 à 15h14

  • meriam

    meriam Admin

    Bonjour, merci pour votre attention.

    le 01/03/2022 à 12h20

  • segolene.boulanger-52

    segolene.boulanger-52

    Bonjour, le texte de la leçon est écrit en double, c'est normal?

    le 04/10/2021 à 13h56

  • meriam

    meriam Admin

    Bonjour, merci pour votre remarque, je vais vérifier.

    le 04/10/2021 à 14h41

  • abid.nadia-2

    abid.nadia-2

    bonsoir idem je bloc alors que mon code parait bon je retire et ajoute des espaces en vain help please

    le 26/05/2018 à 19h24

  • mram

    mram Admin

    Bonjour, il n'y a rien a faire sur cet exercice, juste passer à la suite. C'est juste une introduction.

    le 02/06/2018 à 00h05

  • samy1s

    samy1s

    Pour résoudre le bug et faire valider la leçon, vous n'avez qu'à supprimer l'élément "link" :)

    le 08/03/2018 à 18h19

  • mram

    mram Admin

    Ou le commenter, c'est une bonne occasion de revoir les commentaires HTML :)

    le 08/03/2018 à 21h46

  • Gapa

    Gapa

    Il faut supprimer la ligne 4 <link type="text/css" rel="stylesheet" href="stylesheet.css" />

    le 05/03/2018 à 14h31

  • mram

    mram Admin

    C'est une solution, car en effet la correction s'attend à l'existence d'un fichier .css qui n'existe pas.

    le 08/03/2018 à 20h50

  • Elyann

    Elyann

    y a un bug, je peu pas valider, alors qu'il est juste demander de soumettre, je n'ai rien toucher au scrypte....

    le 26/02/2018 à 16h55

  • mram

    mram Admin

    Bonjour, oui en effet, dans ce cas passez à la suite en cliquant sur la flèche en haut à droite de la page.

    le 01/03/2018 à 21h04

Pour publier un commentaire, vous devez vous connecter.
index.html
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Marges et bordures</title> </head> <body> <h3>Illustration du modèle de boîte en CSS</h3> <img src="http://www.w3.org/TR/CSS21/images/boxdim.png"> <p>Crédit: www.w3.org</p> </body> </html>
http://localhost:8080