Testez vos connaissances : le modèle de boîte

L'objectif de cette évaluation est de vous aider à vérifier votre compréhension du modèle de boîte CSS.

Note : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme CodePen, JSFiddle ou Glitch pour travailler sur les exercices.

Si vous bloquez, demandez-nous de l'aide : voir la section Évaluation et aide en bas de cette page.

Exercice n°1

Regardez les deux boîtes ci-dessous : l'une utilise le modèle de boîte standard, tandis que l'autre utilise le modèle de boîte alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte.

Le résultat final doit ressembler à l'image ci-dessous :

Deux boîtes de la même taille

Essayez de mettre à jour le code éditable ci-dessous pour reproduire l'exemple terminé :

Téléchargez le code de départ pour cet exercice afin de travailler avec votre propre éditeur ou avec un éditeur en ligne.

Exercice n°2

Dans cet exercice, ajoutez ce qui suit à la boîte :

  • Une bordure pointillée, noire, de 5px d'épaisseur ;
  • Une marge supérieure de 20px ;
  • Une marge à droite de 1em ;
  • Une marge inférieure de 40px ;
  • Une marge gauche de 2em ;
  • Un espace intérieur sur tous les côtés de 1em.

Le résultat final devrait ressembler à cette image :

Une boîte avec une bordure pointillée

Essayez de mettre à jour le code éditable ci-dessous pour reproduire l'exemple terminé :

Téléchargez le code de départ pour cet exercice afin de travailler avec votre propre éditeur ou avec un éditeur en ligne.

Exercice n°3

Dans cet exercice, l'élément en ligne possède une marge, un espacement intérieur et une bordure. Toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?

Le résultat final devrait ressembler à cette image :

Une boîte en ligne avec un espace entre elle et le texte qui l'entoure

Essayez de mettre à jour le code éditable ci-dessous pour reproduire l'exemple terminé :

Téléchargez le code de départ pour cet exercice afin de travailler avec votre propre éditeur ou avec un éditeur en ligne.

Évaluation et aide

Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.

Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :

  1. Enregistrez votre travail dans un éditeur en ligne partageable, du type CodePen, JSFiddle ou Glitch. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.

  2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie Learning du forum Discourse de MDN. Votre message doit inclure :

    • Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".
    • Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.
    • Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code !
    • Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.