图像按钮

时间:2016-05-01 13:31:23

标签: html css

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

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,如果这有所不同?

2 个答案:

答案 0 :(得分:1)

padding: none应为padding: 0;

您还需要使用imgfurther 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>

答案 1 :(得分:0)

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