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

L'objectif de cet exercice 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.

Modèle de boîte : numéro 1

Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle 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 direct ci-dessous pour reproduire l'exemple terminé :

Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

Modèle de boîte : numéro 2

Dans cet exercice, ajoutez à 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.

Une boîte avec une bordure pointillée

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

Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

Modèle de boîte : numéro 3

Dans cet exemple, 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 ?

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

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

Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir 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 "Apprentissage" (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.