Exercice 7/25

  • Dans le fichier stylesheet.css, ajoutez la propriété margin et sa valeur auto à l'élément div. Des marges automatiques vont centrer l'élément en question;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 7/25

Commençons par les marges externes (margin). Ajuster les marges externes va non seulement modifier la position de l'élément relativement à tous les autres éléments de la page, mais aussi relativement aux "frontières" du document HTML.

Dans cet exercice, les tirets rouges représentent les bordures des éléments html et body. Vous constatez que par défaut, body possède déjà des marges sans qu'il y ait besoin de le spécifier. C'est le cas de nombreux éléments qui sont de type block par défaut (body p h1-h5 ...) mais ce n'est pas le cas du div qui est une balise générique.

Le div est donc collé aux bordures de body.

Commentaires les mieux notés

  • pierrepapot

    petit probleme ici pr moi : vous devriez avoir un élément html avec la regle : margin: auto; . Je pense bien avoir ajouter la ligne " margin: auto; " dans l'element div ( comme dans l'exercice suivant ) et j'ai toujours le message d'erreur.

  • pierrepapot

    "vous devriez avoir un élément html "margin: auto" , élément que je pense avoir bien fait dans div{ , et comme dans l'exemple suivant mais impossible d'avoir la réponse exact ici

  • y.c13

    div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #4D94FF; margin: auto; Vous devriez avoir 1 élément html avec la règle CSS "margin: auto". Je vois pas ce que je peux faire de plus là.

  • rbarre

    Bonjour, Il y aurait-il un bug dans votre script de correction ou est-ce que cela viens de moi ? Let me know please :)

10 Commentaires

  • pierrepapot

    pierrepapot

    petit probleme ici pr moi : vous devriez avoir un élément html avec la regle : margin: auto; . Je pense bien avoir ajouter la ligne " margin: auto; " dans l'element div ( comme dans l'exercice suivant ) et j'ai toujours le message d'erreur.

    le 04/03/2016 à 13h09

  • pierrepapot

    pierrepapot

    "vous devriez avoir un élément html "margin: auto" , élément que je pense avoir bien fait dans div{ , et comme dans l'exemple suivant mais impossible d'avoir la réponse exact ici

    le 06/03/2016 à 08h40

  • y.c13

    y.c13

    div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #4D94FF; margin: auto; Vous devriez avoir 1 élément html avec la règle CSS "margin: auto". Je vois pas ce que je peux faire de plus là.

    le 06/03/2016 à 21h09

  • rbarre

    rbarre

    Bonjour, Il y aurait-il un bug dans votre script de correction ou est-ce que cela viens de moi ? Let me know please :)

    le 09/03/2016 à 10h59

  • mram

    mram Administrateur

    Bonjour,

    Oui, le script de correction a été mis à jour afin de mieux gérer les propriétés raccourcies et notamment "margin". La mise à jour sera mise en production prochainement. De ce fait, vous pouvez considérer l'exercice comme réussi et passer à la suite. Vous pourrez le finaliser une fois qu'il sera mis à jour.

    Cordialement.

    le 12/03/2016 à 01h17

  • simon.fred

    simon.fred

    Bonjour, je ne sais pas si vous avez eu le temps de faire la mise à jour mais on à toujours le même message d'erreur :)

    le 10/06/2016 à 15h25

  • mram

    mram Administrateur

    En effet, là c'est réglé pour de bon, on va mettre à jour.

    le 11/06/2016 à 00h31

  • AW

    AW

    Trois jours après, c'est toujours : vous devriez avoir un élément html ...

    le 13/06/2016 à 14h59

  • mram

    mram Administrateur

    C'est réglé...

    le 13/06/2016 à 18h14

  • farjallah.refka-37

    farjallah.refka-37

    Rebonjour, c bon probleme resolu

    le 02/03/2019 à 17h51

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Marge externe</title> </head> <body> <div></div> </body> </html>
div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #4D94FF; } html, body { border: 1px dashed #ff0000; }