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.

Commentaires les mieux notés

  • Elyann

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

  • Gapa

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

  • samy1s

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

  • abid.nadia-2

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

4 Commentaires

  • 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 à 18h55

  • mram

    mram Administrateur

    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 à 23h04

  • Gapa

    Gapa

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

    le 05/03/2018 à 16h31

  • mram

    mram Administrateur

    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 à 22h50

  • 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 à 20h19

  • mram

    mram Administrateur

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

    le 08/03/2018 à 23h46

  • 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 à 23h24

  • mram

    mram Administrateur

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

    le 02/06/2018 à 04h05

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>