Leerraum zwischen Bild und Rahmen auf dem Grafik-Taste

Question

ich bin immer etwas Platz zwischen meinem Bild und der Knopfleiste. Ich kann es nicht loswerden, was immer ich versuche.

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 
} 

Jede Hilfe wäre toll. Verwenden Sie Sinatra und Ruby mit meinem HTML, wenn das einen Unterschied macht?

Answer 1

padding: none sollte padding: 0; sein

Sie müssen auch um die img unter Verwendung display: block (further reading) den Standardabstand entfernen.

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

Fügen Sie den backgorund mit CSS Hintergrund Bild-URL-Tag auch Polsterung ändern: 0 Polsterung Platz in Standard-Browser

CSS zurücksetzen:

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