I've got a button inside my div. The image is showing some kind of padding around it

            <div id="member-name"  hidden="true">
                <span><button id="expandButton"><img src="~/Content/Images/plus.jpg" /></button></span><p id="member-fullName"></p> 
            </div>

Not sure how to get rid of this issue, see the grey around that plus image..I want to get rid of that.

Here's the image alone, see that there is nothing around it:

here is my css (just various related snippets to all this):

    div { padding: 0px;}

input[type="submit"], input[type="button"], button 
{
        background-color: #ffffff;
        cursor: pointer;
        font-size: 11px;
        font-weight: 600;
        padding: 0px;
        margin: 0px;
        width: auto;
        vertical-align: middle;
}

        #member-name 
        {
            margin: 30px 0px 0px 0px;
            height: 20px;
            font-weight: bold;
            color: white;
            padding: 1px 1px 0px 1px;
            background-color: #d28105;
            border: 1px solid darkgray;
            overflow: hidden;
        }

        #member-name.p { display: inline-block; }
        /* #member-name.input[type="submit"] { margin: 0px;padding: 0px; }  - this does not work, probably wrong syntax anyway */