图像按钮

Question

我的图像和按钮边框之间有一些空白区域。无论我尝试什么，我似乎无法摆脱它。

HTML：

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

CSS：

#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
}

任何帮助都会很棒。我使用sinatra和ruby与我的HTML，如果这有所不同？

Answer 1

padding: none应为padding: 0;

您还需要使用img（further reading）删除display: block周围的默认空格。

#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>

使用css背景图片添加backgorund url标签也更改padding：0以重置浏览器默认的填充空间

的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');
}