Hi all, I have a button class that I wrote in CSS. It essentially displays block, adds some styles, etc. Whenever I add the class to a tags, it works fine - the a tag spans the entire width of its container like display:block should do... However, when I add the button class to an input button, Chrome, Safari, and Firefox all add a margin-right: 3px...

I've used the DOM inspector in both Chrome and Safari and NO WHERE should it be adding a extra 3px padding.

I tried adding margin: 0 !important; and/or margin-right: 0 !important to my button class in my CSS, but the browser STILL renders a 3px right margin!

Is this a known issue, and is there a CSS-based solution (i.e. not jQuery/javascript)

CODE FOLLOWS:

.button {
  position: relative;
  display: block;
  margin: 0;
  border: 1px solid #369;
  color: #fff;
  font-weight: bold;
  padding: 11px 20px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  cursor: hand;
  cursor: pointer;
}