I can't figure how I'm getting this whitespace surrounding my image:

8otCP.jpg

The code:

The markup:



<div id="member-name" hidden="true">
<!-- injected full name -->
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>

the styles:

Code CSS:
    input, textarea 
    {
        border: 1px solid #e2e2e2;
        background: #fff;
        color: #333;
        font-size: .9em;
        margin: 5px 0 6px 0;
        padding: 5px 2px 5px 5px;
        width: 300px;
    }
 
    img 
    {
    	display: block; /* gets rid off any unexpected margins round the image */
    	border: 0px;
    }
 
 
    input[type="submit"], input[type="button"], button 
    {
            background-color: #ffffff;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            width: auto;
            vertical-align: middle;
    	border: 0px;
    }
 
    td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
 
   #btnExpandSection { margin: 0px; padding: 0px; }