如何檢查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