对于具有给定高度，填充和边框的文本输入的边框，检查员给出错误的高度？

Question

http://jsfiddle.net/a9u5h0s7/

代码：

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

如果你看看那个jsfiddle（我在chrome中试过）并检查输入元素，你会发现它应该有30px的高度，但是，如果你做内容+填充+边框，你会得到25像素...

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

Answer 1

这是个好主题

Hadoop

在所有浏览器中都是正确的，＃example元素大小是30px，其中20px是元素高度，4px填充顶部大小，4px填充底部大小，1px是填充顶部，1px是填充底部所以20 + 4 + 4 + 1 +1 = 30