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

12 Commentaires

  • nicolasgandon15

    nicolasgandon15

    j'ai ajouté la propriété margin et sa valeur auto à l'élément div comme sa div { margin: auto } et un message d'erreur s'affiche : Vous devez modifier 6 propriété css de la balise div

    le 16/09/2020 à 12h20

  • meriam

    meriam Admin

    Bonjour, pas besoin d'ajouter un nouveau sélecteur pour attribuer une marge à l'élément div car vous avez déja un sélecteur div.

    le 16/09/2020 à 12h31

  • farjallah.refka-37

    farjallah.refka-37

    Rebonjour, c bon probleme resolu

    le 02/03/2019 à 15h51

  • mram

    mram Admin

    C'est réglé...

    le 13/06/2016 à 14h14

  • AW

    AW

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

    le 13/06/2016 à 10h59

  • mram

    mram Admin

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

    le 10/06/2016 à 20h31

  • 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 à 11h25

  • mram

    mram Admin

    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 11/03/2016 à 23h17

  • 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 à 08h59

  • 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 à 19h09

  • 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 à 06h40

  • 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 à 11h09

Pour publier un commentaire, vous devez vous connecter.
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; }
http://localhost:8080