按钮边框出现在对象高度内

Question

这不是一个主要问题，因为它可以很容易地用一点css调整 - 只是我有兴趣知道的事情。根据盒子模型，为什么边框出现在按钮元素的高度而不是外部？在下面的示例中，我有一个button元素和一个anchor元素。高度均为30px，边框为1px。但是，按钮元素显示为2px镜头而非锚点（在总高度32px时正确显示）。

http://jsfiddle.net/Y9Rv7/1/

由于

Answer 1

将此添加到样式应解决您的问题

box-sizing: content-box

这将导致元素根据需要进行渲染。我相信默认情况下按钮渲染边框框行为会导致填充和边框添加内部框。