How to check width property of CSS class selector? An example is .label{}

Question

Here is my comment on the css code where I chose a width of 270 for the .label:

If you use your browser's developer tools to inspect the .label element, you may notice that it is actually 288 pixels wide, not 270 pixels wide. This is because, by default, browsers include borders and padding when determining the size of an element. < /p>

This is my CSS code:

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

How do I check in my browser to confirm the 288px referenced here?

Answer 1

In the Inspection tab (Chrome in the screenshot) you should be able to see the calculated dimensions, which shows the aggregate width including padding, borders, and margins.

In your case it is 270px (7px 7px) (2px 2px) 0px