Exercice 2/25

  • Dans le fichier stylesheet.css (ligne 6), attribuez la propriété display et sa valeur block pour tous les éléments div;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 2/25

Il est possible de changer le comportement par défaut de l'affichage d'un élément html au moyen de la propriété **display**. Cette propriété peut prendre plusieurs valeurs :

  • block : les éléments "block" (div p h1-h5 table) prennent toute la largeur disponible par défaut et se positionnent donc sous l'élément précédent. Vous pouvez leur appliquer des dimensions (width, height) et des marges (margin, padding);
  • inline-block :les éléments "inline-block" ont les mêmes caractéristiques que les "block" mais peuvent être disposés sur une même ligne et pas les uns en dessous des autres;
  • inline :les éléments "inline" (a span strong em) prennent les dimensions du texte qu'il contiennent. Il n'est pas possible de leur donner des dimensions propres (width, height) ni de leur appliquer des marges externes hautes et basses (margin-top, margin-bottom). Mais ils peuvent avoir des marges internes (padding);
  • none :les éléments "none" et leur contenu disparaissent complètement de la page;

Commentaires les mieux notés

  • mram Administrateur

    Il faut juste un espace avant "block" je pense...

  • mram Administrateur

    C'est normal, et la réponse est donnée dans les exercices qui suivent normalement.

  • waspy00

    Je ne comprends pas : à l'exercice des cercles "ami, famille, travail", les div étaient inscrits exactement pareils et apparaissaient les uns à côté des autres... Ici, (avant même d'ajouter le CSS "display:block"), les div sont affichés les uns sur les autres. Comment cela se fait-il ?

  • waspy00

    Ah non, pardon, je n'avais pas vu : il y avait "inline-block" dans l'exercice précedent...

11 Commentaires

  • mram

    mram Administrateur

    Il faut juste un espace avant "block" je pense...

    le 16/09/2016 à 14h54

  • mram

    mram Administrateur

    C'est normal, et la réponse est donnée dans les exercices qui suivent normalement.

    le 21/05/2017 à 22h44

  • waspy00

    waspy00

    Je ne comprends pas : à l'exercice des cercles "ami, famille, travail", les div étaient inscrits exactement pareils et apparaissaient les uns à côté des autres... Ici, (avant même d'ajouter le CSS "display:block"), les div sont affichés les uns sur les autres. Comment cela se fait-il ?

    le 06/06/2017 à 14h41

  • waspy00

    waspy00

    Ah non, pardon, je n'avais pas vu : il y avait "inline-block" dans l'exercice précedent...

    le 06/06/2017 à 14h48

  • mram

    mram Administrateur

    Les "div" sont de type "bloc" par défaut. Donc préciser à nouveau "display : block" ne change rien à l'affichage.

    le 12/06/2017 à 14h40

  • Biche Tordue

    Biche Tordue

    j'ai répondu et ça me dit que la réponse est correcte mais je ne vois aucune différence entre avant et après avoir intégrer le code

    le 18/05/2017 à 14h49

  • atif.souidi

    atif.souidi

    je ne comprend pas mon erreur

    le 15/09/2016 à 17h23

  • steve.besson

    steve.besson

    la cela ne change rien a l'affichage .....?

    le 12/11/2017 à 16h11

  • mram

    mram Administrateur

    Bonjour, les élément "div" sont de type "bloc" par défaut. Donc préciser à nouveau "display : block" ne change rien à l'affichage.

    le 16/11/2017 à 16h48

  • melanie.dsneto-58

    melanie.dsneto-58

    Bonjour, je ne vois pas où se trouve l'erreur..

    le 20/02/2018 à 00h02

  • mram

    mram Administrateur

    Bonjour, la couleur de fond pour le div avec l'id "un" : il faut mettre les lettres soit en minuscule soit en majuscule, mais pas un mix des deux. En principe ça fonctionne, mais la syntaxe n'est pas propre.

    le 25/02/2018 à 00h20

  • benon.thierry-92

    benon.thierry-92

    Bonjour, désolé, mais je ne comprend pas Les "div" sont de type "bloc" donc préciser à nouveau "display : block" n'a aucun intérêt si ?

    le 15/08/2018 à 14h39

  • mram

    mram Administrateur

    Bonjour, les balises HTML ont toutes une valeur par défaut pour la propriété "display".

    Pour les "div" cette valeur est "block", donc le préciser à nouveau dans votre code CSS ne changera rien, car c'est leur comportement par défaut.

    le 28/08/2018 à 21h56

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Prenons de l'ampleur</title> </head> <body> <div id="un"></div> <div id="deux"></div> <div id="trois"></div> <div id="quatre"></div> </body> </html>
div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; /*Ajoutez votre CSS ici !*/ } #un { background-color: #4D94FF; } #deux { background-color: #3385FF; } #trois { background-color: #1975FF; } #quatre { background-color: #0066FF; }