The border button displayed at the height of the object

Question

This is not a serious problem as it can be easily configured with a bit of css - just something that I am interested to know. Why is the border displayed within the height of the button element instead of the outer one, in accordance with the window model? In the example below, I have a button element and an anchor element. Both heights are 30px, with a border of 1px. However, the button element looks like a 2px shoter than the anchor (which displays correctly at a total height of 32px).

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

thanks

Answer 1

Adding this style to the style should solve your problem

box-sizing: content-box 

This will cause the item to be displayed as you wish. I believe that the default render buttons are borderline behavior that force padding and borders to be added inside .