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

  • w.sevagamy-7

    ça ne fontionne pas alors que il y a la bonne réponse, je comprend pas

  • andrade.meilyn-42

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

  • w.sevagamy-7

    c'est bon j'ai compris mon erreur

3 Commentaires

  • 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 à 04h26

  • mram

    mram Administrateur

    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 à 04h15

  • w.sevagamy-7

    w.sevagamy-7

    c'est bon j'ai compris mon erreur

    le 03/02/2020 à 20h42

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; }