1

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?

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
  • If someone's solution solved your problem, you might want to accept it as the answer using the big checkbox. For more info: [how does accepting an answer work?](http://stackoverflow.com/help/someone-answers) – Aziz May 01 '16 at 14:26

2 Answers2

2

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>
Community
  • 1
  • 1
Turnip
  • 35,836
  • 15
  • 89
  • 111
0

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');
}
codeParane
  • 29
  • 10