如何检查CSS类选择器的宽度属性？一个例子是.label{}

Question

这是我对 css 代码的评论，其中我为 .label 选择了 270 的宽度：

如果您使用浏览器的开发人员工具检查 .label 元素，您可能会注意到它实际上是 288 像素宽，而不是 270 像素。这是因为，默认情况下，浏览器在确定元素大小时包括边框和填充。< /p>

这是我的 CSS 代码：

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

如何在浏览器中检查以确认此处引用的 288px？

Answer 1

在“检查”选项卡（屏幕截图中的 Chrome）中，您应该能够看到计算出的尺寸，其中显示了聚合宽度，包括内边距、边框和边距。

在您的情况下，它是 270px (7px 7px) (2px 2px) 0px