Exercice 10/25

Dans cet exercice, l'élément div est collé au body. Vous avez vu précédemment comment ajouter des marges externes margin au div afin de le décoller.

Ici, vous allez appliquer des marges internes à l'élément body pour obtenir un résultat similaire.

  • Dans le fichier stylesheet.css,ajoutez la propriété padding à l'élément body uniquement (créez un nouveau sélecteur pour cela) et utilisez la notation raccourcie pour appliquer une marge interne en haut de 25px et à gauche de 50px. Regardez l'astuce pour voir comment gérer les valeurs nulles;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 10/25

Tout comme les marges externes margin, les marges internes padding peuvent être définies spécifiquement pour chaque côté d'un élément html.

Si vous voulez ajuster une marge interne en particulier, vous pouvez le faire comme cela :

    padding-top: /* Valeur de la marge interne du haut */
    padding-right: /* Valeur de la marge interne de droite */
    padding-bottom: /* Valeur de la marge interne du bas */
    padding-left: /* Valeur de la marge interne de gauche */        
    

Vous pouvez aussi définir toutes les marges internes d'un élément avec la notation raccourcie. Il suffit juste de partir du haut et de tourner dans le sens des aiguilles d'une montre (Haut Droite Bas Gauche), comme cela :

    padding: 1px 2px 3px 4px
    

Avec la notation raccourcie vous pouvez aussi appliquer des valeurs nulles si vous n'avez pas besoin de marge sur chaque côté. Attention, n'oubliez pas que l'odre de déclaration des valeurs se fait dans le sens horaire : haut, droite, bas, gauche. L'exemple suivant applique une marge interne de 5px à droite et 10px à gauche. Les autres marges sont nulles (quand la valeur est nulle, pas besoin de préciser l'unité) :

padding: 0 5px 0 10px

Commentaires les mieux notés

  • shirlenhocquard-28

    bonjour mon code : padding: 25px 0 0 50px; me parait pas faux , je comprend pas le souci ?

  • ronald.rukund-23

    html, body { border: 1px dashed #ff0000; padding:25px 0 0 50px; } ou est l,erreur svp

  • dynaouest

    Je ne comprends ou je fais une erreur ! voici mon code : div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #4D94FF; } html,body { border: 1px dashed #ff0000; } body { padding: 25px 0 0 50px; }

  • mram Administrateur

    Bonjour,

    Votre code est à priori correct, le script de correction sera mis à jour prochainement pour éviter cette erreur non justifiée.

    Cordialement.

32 Commentaires

  • dynaouest

    dynaouest

    Je ne comprends ou je fais une erreur ! voici mon code : div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #4D94FF; } html,body { border: 1px dashed #ff0000; } body { padding: 25px 0 0 50px; }

    le 20/02/2016 à 20h26

  • mram

    mram Administrateur

    Bonjour,

    Votre code est à priori correct, le script de correction sera mis à jour prochainement pour éviter cette erreur non justifiée.

    Cordialement.

    le 22/02/2016 à 23h34

  • callum.chiverto

    callum.chiverto

    Bonjour, moi aussi ca ne me permettait pas non plus avec le meme code que @dynaouest hier, aujourd'hui non plus.Je retournerai bientot pour voir si le souci est corrigé

    le 23/02/2016 à 17h01

  • jovidal

    jovidal

    Du coup ça sert a quoi padding-left et autre quand le raccourci nous permet de faire quelque chose d'identique et propre avec moins de ligne ?

    le 23/05/2017 à 18h50

  • mram

    mram Administrateur

    Bonjour,

    En fait, le script de correction a déjà été corrigé, mais n'a pas été envoyé sur le serveur en production. Je n'ai pas les accès pour le faire, mais j'ai envoyé une demande pour que ce soit fait.

    Je reviendrai ici pour vous en informer.

    Cordialement.

    le 23/02/2016 à 21h36

  • pizzutoandrea3

    pizzutoandrea3

    Helpppp

    le 06/06/2017 à 00h27

  • debora.arjona

    debora.arjona

    Bonjour, j’essaie de répondre à l’exercice et j'arrive pas à valider ma réponse. Comment je peux passer aux exercices suivantes?

    le 29/12/2016 à 22h44

  • jothore

    jothore

    Bonjour ! L'erreur apparaît toujours, y a-t-il un moyen de la contourner pour pouvoir continuer l'exercice ?

    le 26/02/2016 à 14h00

  • mram

    mram Administrateur

    ça sert si vous souhaiter modifier que la marge à gauche sans toucher aux valeurs des autres marges.

    le 29/05/2017 à 15h15

  • mram

    mram Administrateur

    Bonjour,

    Oui c'est normal, la mise à jour a été faite mais pas encore envoyée sur le serveur de production. Cela devrait être fait dans le courant de la semaine prochaine normalement. Il n'est à priori pas possible de contourner l'erreur. N'hésitez pas à passer aux exercices suivants pour l'instant.

    Cordialement.

    le 26/02/2016 à 18h53

  • mram

    mram Administrateur

    Dans le fichier stylesheet.css il faut ajouter des marges internes avec la propriété "padding". Sinon pour passer à l'exercice suivant, cliquez sur le lien correspondant dans la liste ci-dessous.

    le 02/01/2017 à 14h44

  • mram

    mram Administrateur

    Non, ligne 12 il faut utiliser la notation raccourcie.

    le 12/06/2017 à 14h31

  • mariegrard

    mariegrard

    Bonjour, il y a un problème de notation dans l'énoncé. padding-top: /* Valeur de la marge externe << interne>> du haut */ padding-right: /* Valeur de la marge externe << interne>>de droite */ padding-bottom: /* Valeur de la marge externe << interne>>du bas */ padding-left: /* Valeur de la marge externe << interne>> de gauche */ ou bien j'ai rien compris à l'exercice...

    le 22/03/2017 à 19h33

  • mram

    mram Administrateur

    Oui, bien vu, merci !

    le 24/03/2017 à 10h37

  • ndjoubri

    ndjoubri

    bonjour je ne vois pas mon erreur pouvez vous m'aider

    le 01/01/2018 à 17h42

  • mram

    mram Administrateur

    Bonjour, l'erreur est à la dernière ligne. Il est recommandé de ne pas mettre d'unité quand une valeur est à zéro, car c'est inutile.

    le 06/01/2018 à 19h11

  • yurilecomte-94

    yurilecomte-94

    help

    le 08/07/2018 à 15h01

  • mram

    mram Administrateur

    Bonjour, je ne peux pas vous aider avec si peux d'informations.

    Quel message d'erreur avez-vous ?

    le 09/07/2018 à 03h32

  • samir.sabor-57

    samir.sabor-57

    j' arrive pas a trouver mon erreur

    le 22/05/2019 à 01h20

  • meriam

    meriam Administrateur

    Bonjour, il faut ajouter la propriété padding pour l'élément body seulement.

    le 22/05/2019 à 11h51

  • meriam

    meriam Administrateur

    donc il faut créer un autre sélecteur pour body.

    le 22/05/2019 à 11h52

  • imane.tayeb-92

    imane.tayeb-92

    Bonjour, vous me dites que je n'ai pas ajouté la propriété css demandée. Je pense donc n'avoir pas compris l'énoncé, puisque j'ai ajouté la propriété padding au sélecteur body. Si ce n'est pas ça qu'il faut faire, alors qu'est-ce que c'est?

    le 09/07/2018 à 21h28

  • mram

    mram Administrateur

    Bonjour, en effet la propriété est bien dans votre code, j'ai du lire trop vite. Toutes mes excuses.

    Si vous ne pouvez pas valider c'est parce qu'il y a des espaces inutiles en fin de lignes, après les accolades notamment.

    Après ça devrait être bon :)

    le 16/07/2018 à 04h42

  • mehd.naf.56-14

    mehd.naf.56-14

    pk j'ai cette erreur Vérifiez les blocs de déclarations délimités par les { et }. Vous devriez en avoir 3. Mais ça fait deux exo que les erreur ne sont pas justifiées comment ça se fait qu'il valide pas correctement

    le 15/08/2018 à 02h29

  • mram

    mram Administrateur

    Il vous manque une partie de l'énoncé. Il faut aussi appliquer un style à "body" uniquement.

    le 28/08/2018 à 21h52

  • imane.tayeb-92

    imane.tayeb-92

    Bonjour, je ne comprends pas d'où vient mon erreur. Pouvez-vous m'aider s'il-vous-plaît?

    le 29/06/2018 à 11h36

  • mram

    mram Administrateur

    Bonjour, vous n'avez pas ajouté la propriété CSS demandée.

    le 05/07/2018 à 04h43

  • jeremy-elbaze

    jeremy-elbaze

    Bonjour, je ne comprends pas mon erreur, j'ai un message me disant: "Vérifiez la syntaxe de la règle CSS pour les marges internes de <body>." Pouvez m'aider svp ?

    le 21/09/2017 à 01h56

  • mram

    mram Administrateur

    Bonjour, oui en pratique mettre l'unité "px" (ou une autre) à une valeur nulle est possible mais ne sert à rien. C'est ça qui vous bloquait ici.

    le 22/09/2017 à 17h27

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Marge interne : haut, bas, gauche, droite</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; }