Bootstrap link button and button not the same width. How to fix?

Question

I added width property to bootstrap buttons. However, it did not make <a class="btn" /> the same width as <button class="btn" />. Here's the jsFiddle.

This is in Chrome.

Answer 1

Resetting the left and right padding to zero helps but leaves the link button 2px wider.

This is because chrome's user agent applies box-sizing: border-box to button elements which means the padding will be included in the width and not in addition to it.

Setting box-sizing: content-box in your class fixes this 2px difference as well.

See demo.