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émentbodyuniquement (créez un nouveau sélecteur pour cela) et utilisez la notation raccourcie pour appliquer une marge interne en haut de25pxet à gauche de50px. 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
101 Commentaires
-
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 Admin
Code correct, aucun beug
le 30/01/2023 à 13h59
-
ryan-yahi44-23
normalement c'est 25px 0px 0px 50px pourquoi on mets pas les pixelsle 24/02/2022 à 16h38
-
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
Bonjour, ce message s'affiche: "Il vous manque la règle css pour la balise div"le 14/01/2022 à 10h43
-
meriam Admin
Bonjour, il faut supprimer la propriété margin et la valeur auto du sélecteur div.
le 14/01/2022 à 13h23
-
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 Admin
Bonjour, votre code fonctionne correctement.
le 26/10/2021 à 12h37
-
alexbloudeau-59
bonjour, je ne comprend pas mon erreurle 11/10/2021 à 07h52
-
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
C'est bn j'ai compris mon étourderie !le 05/10/2021 à 11h07
-
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
Moi j'ai noté ça comme code : html, body { border: 1px dashed #ff0000; padding: 25px 0 0 50px; }le 05/10/2021 à 10h15
-
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
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 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
bonjour ! merci meriam pour votre réponse. problème résolule 10/07/2021 à 12h59
-
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
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 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
Je comprends vraiment pas mon erreur :/le 05/05/2021 à 00h33
-
meriam Admin
Bonjour, pour la marge interne utilisez la propriété raccourcie padding au lieu de padding-top.
le 06/05/2021 à 13h14
-
doudoudark11
correction : body { padding: 25px 0 0 50px ]le 06/11/2020 à 07h03
-
doudoudark11
il ne faut pas mettre d'unité si la valeur est nullele 06/11/2020 à 07h02
-
kgaudin2012-54
j'ai un petit souci avec cet exercice, j'ai tout tenté, avez vous une solution. mercile 08/09/2020 à 10h24
-
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
Bonjour, je suis bloqué. Il vous manque la règle css pour la balise div??le 13/07/2020 à 21h06
-
meriam Admin
Bonjour, votre erreur est au niveau du sélecteur html,body,pour l
le 14/07/2020 à 06h16
-
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
Commentaires les mieux notés