Whitespace around image

HTML & CSS
1

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

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:

    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; }
2

Rather than giving the button auto width, I’d try giving it the width of the image.

3

thanks but that didn’t work…

4

Do you have a link, or can you post you entire code (a working page example with the image)? Otherwise, it’ hard to help.