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'ordre 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

101 Commentaires

  • wim.z-12

    wim.z-12

    Cet exercice est beugé j'ai beau mettre le bon code, je ne peux pas valider : 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 29/01/2023 à 08h05

  • Patricio M

    Patricio M Admin

    Code correct, aucun beug

    le 30/01/2023 à 13h59

  • ryan-yahi44-23

    ryan-yahi44-23

    normalement c'est 25px 0px 0px 50px pourquoi on mets pas les pixels

    le 24/02/2022 à 16h38

  • meriam

    meriam Admin

    pixel c'est l'unité de mesure, combien de pixel, on doit laisser au niveau de chaque coté.

    le 25/02/2022 à 01h12

  • garicanna-95

    garicanna-95

    Bonjour, ce message s'affiche: "Il vous manque la règle css pour la balise div"

    le 14/01/2022 à 10h43

  • meriam

    meriam Admin

    Bonjour, il faut supprimer la propriété margin et la valeur auto du sélecteur div.

    le 14/01/2022 à 13h23

  • WnX

    WnX

    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 26/10/2021 à 12h12

  • meriam

    meriam Admin

    Bonjour, votre code fonctionne correctement.

    le 26/10/2021 à 12h37

  • alexbloudeau-59

    alexbloudeau-59

    bonjour, je ne comprend pas mon erreur

    le 11/10/2021 à 07h52

  • meriam

    meriam Admin

    Bonjour, il suffit d'écrire le sélecteur body { padding:padding: 25px 0 0 50px;}

    le 11/10/2021 à 10h34

  • florie.gicquel-20

    florie.gicquel-20

    C'est bn j'ai compris mon étourderie !

    le 05/10/2021 à 11h07

  • meriam

    meriam Admin

    N'hésitez pas à demander de l'aide si vous trouvez des problèmes dans les exercices suivants.

    le 08/10/2021 à 10h15

  • florie.gicquel-20

    florie.gicquel-20

    Moi j'ai noté ça comme code : html, body { border: 1px dashed #ff0000; padding: 25px 0 0 50px; }

    le 05/10/2021 à 10h15

  • meriam

    meriam Admin

    Bonjour, vous avez attribuer la propriété padding à l'élément body et html, alors qu'il faut l'attribuer uniquement pour body.

    le 08/10/2021 à 09h53

  • florie.gicquel-20

    florie.gicquel-20

    Admin je ne parviens pas a comprendre le soucis. Il m'indique "Vous ne devez modifier que 1 propriété css de la balise html et la balise body.

    le 05/10/2021 à 10h14

  • meriam

    meriam Admin

    Bonjour, vous devez attribuer la propriété padding au sélecteur body (vous devez créer un sélecteur body et affectez la propriété demandée)

    le 08/10/2021 à 09h31

  • ibrahimadatt-1

    ibrahimadatt-1

    bonjour ! merci meriam pour votre réponse. problème résolu

    le 10/07/2021 à 12h59

  • meriam

    meriam Admin

    Je vous en prie, n'hésitez pas à poser des questions si vous trouvez des problèmes dans les exercices qui suivent. Bon travail.

    le 14/07/2021 à 10h06

  • ibrahimadatt-1

    ibrahimadatt-1

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

    le 09/07/2021 à 13h57

  • meriam

    meriam Admin

    Supprimez l'attribut class que vous avez ajouté à l'intérieur de la balise body, ajoutez un sélecteur body tout simplement.

    le 10/07/2021 à 00h00

  • tullius141197-89

    tullius141197-89

    Je comprends vraiment pas mon erreur :/

    le 05/05/2021 à 00h33

  • meriam

    meriam Admin

    Bonjour, pour la marge interne utilisez la propriété raccourcie padding au lieu de padding-top.

    le 06/05/2021 à 13h14

  • doudoudark11

    doudoudark11

    correction : body { padding: 25px 0 0 50px ]

    le 06/11/2020 à 07h03

  • doudoudark11

    doudoudark11

    il ne faut pas mettre d'unité si la valeur est nulle

    le 06/11/2020 à 07h02

  • kgaudin2012-54

    kgaudin2012-54

    j'ai un petit souci avec cet exercice, j'ai tout tenté, avez vous une solution. merci

    le 08/09/2020 à 10h24

  • meriam

    meriam Admin

    Bonjour, ne touchez pas le code de départ, il faut ajouter un 3 ème sélecteur pour body.

    le 08/09/2020 à 12h04

  • sadamhag30-98

    sadamhag30-98

    Bonjour, je suis bloqué. Il vous manque la règle css pour la balise div??

    le 13/07/2020 à 21h06

  • meriam

    meriam Admin

    Bonjour, votre erreur est au niveau du sélecteur html,body,pour l

    le 14/07/2020 à 06h16

  • meriam

    meriam Admin

    Bonjour, votre erreur est au niveau du sélecteur html,body,pour la propriété padding n'est pas demandée.

    le 14/07/2020 à 06h16

stylesheet.css
index.html
div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #4D94FF; } html, body { border: 1px dashed #ff0000; }
<!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>