如何检查css类选择器的width属性,例如.label{}

ybzsozfc 于 2022-11-19 发布在其他

关注(0)|答案(1)|浏览(77)

这是我对css代码的一个注解，在这个注解中，我为.label选择了270的宽度：
如果您使用浏览器的开发人员工具检查.label元素，您可能会注意到它实际上是288像素宽，而不是270像素宽。这是因为，默认情况下，浏览器在确定元素大小时包括边框和填充。
这是我的CSS代码：

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

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

1条答案

在Inspect选项卡（屏幕截图中的Chrome）中，您应该能够看到计算出的大小，它显示了聚合宽度，包括填充、边框和边距。
在您的情况下，它是270像素+（7像素+7像素）+（2像素+2像素）+0像素