Html 如果文本输入上的边框框具有给定的高度、填充和边框，检查器会给出错误的高度吗？

http://jsfiddle.net/a9u5h0s7/

代码：

如果您查看JSFIDLE（我在chrome中尝试过）并检查输入元素，您将看到它的高度应该是30px，但是，如果您使用内容+填充+边框，则会得到25px

这里的主要问题是： 这是chrome中检测内容大小的一个错误，还是它实际上为内容呈现了20px，而它应该是25？

这是一个不错的话题

 #example{
  box-sizing: border-box;
  height: 30px;
  padding: 4px;
  border: 1px solid black; 
   }

---

在所有浏览器中都是正确的，#示例元素大小为30px，其中20px为元素高度，4px为填充顶部大小，4px为填充底部大小，1px为填充顶部，1px为填充底部，因此20+4+4+1+1=30

我始终使用30px。所以它工作得很好：）。边框框表示填充和边框将是输入高度的一部分。

 #example{
  box-sizing: border-box;
  height: 30px;
  padding: 4px;
  border: 1px solid black; 
   }