Exercice 3/25

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

Leçon 3/25

Si vous ne constatez pas beaucoup de différence, c'est normal. Les div sont par défaut des éléments de type block.

Comme indiqué, tout élément qui se positionne comme un bloc viendra automatiquement occuper toute la largeur de la page, quel que soit le contenu (ou le peu de contenu) que vous aurez mis à l'intérieur.

Mais, si vous spécifiez un affichage de type inline-block, les éléments html vont venir se positionner les uns à côté des autres.

Commentaires les mieux notés

8 Commentaires

  • mram

    mram Admin

    C'est bien la largeur de la page dont on parle (sur l'axe X) de la bordure gauche à la bordure droite.

    le 17/02/2017 à 12h10

  • lucswim

    lucswim

    Pourquoi vous écrivez "Comme indiqué, tout élément qui se positionne comme un bloc viendra automatiquement occuper toute la largeur de la page" c'est pas plutôt la longueur de la page?

    le 15/02/2017 à 15h18

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Inline-block</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: block; } #un { background-color: #4D94FF; } #deux { background-color: #3385FF; } #trois { background-color: #1975FF; } #quatre { background-color: #0066FF; }