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

  • andrade.meilyn-42

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

1 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

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