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

  • 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?

  • mram Administrateur

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

  • rodolphe-41

    block ne semble pas fonctionner.... la bordure affiche déja le cadre????

  • thomaskasini-17

    je ne comprends pas inline-block: block;

5 Commentaires

  • 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 à 17h18

  • mram

    mram Administrateur

    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 à 14h10

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