Comment vérifier la propriété width du sélecteur de classe CSS ? Un exemple est .label{}

Question

Voici mon commentaire sur le code css où j'ai choisi une largeur de 270 pour le .label :

Si vous inspectez l'élément .label à l'aide des outils de développement de votre navigateur, vous remarquerez peut-être qu'il fait en réalité 288 pixels de large, et non 270 pixels de large. En effet, par défaut, les navigateurs incluent des bordures et un remplissage lors de la détermination de la taille d'un élément. < /p>

Voici mon code CSS :

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;

Comment puis-je vérifier dans mon navigateur pour confirmer les 288 pixels référencés ici ?

Answer 1

Dans l'onglet Inspection (Chrome dans la capture d'écran), vous devriez pouvoir voir les dimensions calculées, qui indiquent la largeur globale, y compris le remplissage, les bordures et les marges.

Dans votre cas, c'est 270px + (7px + 7px) + (2px + 2px) + 0px