图像按钮上图像和边框之间的空白

Question

I am getting some white space between my image and the button border. I cant seem to get rid of it whatever i try.

 #rock_button { outline: none; position: absolute; top: 265px; left: 19%; border-radius: 8px; cursor: hand; text-align: center; border-color: #3f441c; display: block; padding: none; box-shadow: 2px 10px 10px 5px black }

 <button id="rock_button" class="slideRight" name="choice" value="rock"> <img src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock"> </button>

Any help would be great. Im using sinatra and ruby with my html if that makes a difference?

Answer 1

padding: none should be padding: 0;

You also need to remove the default spacing around the img by using display: block ( further reading ).

 #rock_button { outline: none; /*position: absolute; top: 265px; left: 19%;*/ border-radius: 8px; cursor: hand; text-align: center; border-color: #3f441c; display: block; padding: 0; box-shadow: 2px 10px 10px 5px black } img { display: block; }

 <button id="rock_button" class="slideRight" name="choice" value="rock"> <img src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock"> </button>

Answer 2

html:

<button id="rock_button" class="slideRight" name="choice" value="rock">
  <!--<img src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock">-->
</button>

Add the backgorund using css background image url tag also change padding:0 to reset padding space in browser default

css:

#rock_button {
width:50px;
height:50px;
  outline: none;
  position: absolute;
  top: 265px;
  left: 19%;
  border-radius: 8px;
  cursor: hand;
  text-align: center;
  border-color: #3f441c;
  display: block;
  padding: none;
  box-shadow:  2px 10px 10px 5px black
  background-image:url('http://i.imgur.com/XT41ZXk.jpg');
}