Français
Menu

Bases des technologies web

.card {
  box-sizing: content-box;
  width: 200px;
  padding: 10px;
  border: 2px solid #333;
  margin: 20px;
}

Pour un élément auquel s'applique le CSS ci-dessus, quelle est la largeur mesurée d'un bord extérieur à l'autre des bordures gauche et droite ?

  1. A200px
  2. B224px
  3. C264px
Afficher la réponse et l'explication

Réponse : B. 224px

Dans le modèle de boîte CSS, un élément est formé, de l'intérieur vers l'extérieur, du contenu, du remplissage (padding), de la bordure (border) et de la marge (margin). Avec box-sizing: content-box (la valeur par défaut), width ne représente que la largeur du contenu ; la largeur jusqu'à l'extérieur des bordures vaut donc 200 + 10 × 2 + 2 × 2 = 224px. La marge est l'espace libre à l'extérieur de la bordure, qui sépare l'élément des autres. Avec box-sizing: border-box, width inclut tout jusqu'à la bordure, et la largeur du contenu devient 200 − 24 = 176px.

S'entraîner sur ce thème Retour au thème

Autres questions sur Bases des technologies web

  1. On suppose qu'il n'y a aucune autre règle de style. Dans le HTML ci-dessus, de quelle couleur est le texte « Hello » ?
  2. Dans le traitement qui mène le navigateur jusqu'au premier affichage (le chemin de rendu critique, ou critical rendering path), un élément <script src="app.js"> sans attribut placé dans <head> arrête l'analyse du HTML à cet endroit. Quel comportement est correct si l'on ajoute l'attribut defer à cet élément ?
  3. Lorsqu'on exécute le JavaScript ci-dessus dans un navigateur, quel est l'ordre correct d'affichage des caractères dans la console ?
  4. Selon la politique de même origine des navigateurs, quelle URL est considérée comme de même origine que https://www.example.com/app/index.html ?
  5. Le JavaScript d'une page de https://app.example.com veut envoyer avec fetch une requête POST vers https://api.example.net/orders, avec un corps de type Content-Type: application/json. Quel comportement de CORS est correct dans ce cas ?