Exercice 4/25

  • Dans le fichier stylesheet.css, changez la valeur de la propriété display à inline pour tous les éléments div;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Note:
Vous constaterez que avec la valeur inline les éléments div n'ont plus de largeur width spécifique. Leur dimension est donc calculée selon leur contenu. Comme ils ne contiennent rien, leur largeur est donc réduite au minimum 0px et il ne reste que leur bordure noire.

Leçon 4/25

La valeur inline-block vous permet donc de placer plusieurs blocs sur la même ligne. La valeur inline positionne aussi tous vos éléments les uns à côté des autres mais pas comme des blocs : ils ne conservent pas leur dimension.

Commentaires les mieux notés

11 Commentaires

  • serge.guirand-36

    serge.guirand-36

    Bonjour Patricio, je viens de rectifier l'erreur en supprimant le block et ça fonctionne.

    le 08/09/2022 à 14h05

  • serge.guirand-36

    serge.guirand-36

    J'ai remplacé la valeur display:inline et j'ai une erreur- Vous devez modifier la propriété css display de la balise div par la bonne valeur (inline)

    le 07/09/2022 à 15h02

  • Patricio M

    Patricio M Admin

    Serge, dans le code, je vois display: inline-block et non inline. Si tu reemplace, le bot valide.

    le 08/09/2022 à 07h53

  • w.sevagamy-7

    w.sevagamy-7

    c'est bon j'ai compris mon erreur

    le 03/02/2020 à 18h42

  • andrade.meilyn-42

    andrade.meilyn-42

    A quoi cela serve inline? car le resultat n'est pas vraiment top? Dpnc, je vois vraiment pas.

    le 28/05/2018 à 00h26

  • mram

    mram Admin

    Il sert à pouvoir mettre côte à côte des éléments qui ne le sont pas par défaut, pour faire une mise en page par exemple.

    le 02/06/2018 à 00h15

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>Inline</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; display: inline-block; } #un { background-color: #4D94FF; } #deux { background-color: #3385FF; } #trois { background-color: #1975FF; } #quatre { background-color: #0066FF; }
http://localhost:8080