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

Question

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

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

谢谢

Answer 1

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

box-sizing: content-box

这将导致元素根据需要进行渲染.我相信,通过默认的按钮与边界框行为至极导致添加填充和边框呈现里面的箱子.