图像周围的空白 [英] Whitespace around Image

问题描述

无法弄清楚我如何在我的图片周围获得这个额外的白色空间：

标记：

 < div id =member-namehidden =true> 
< button type =submitid =btnExpandSection> ;< img src =〜/ Content / Images / plus.jpg/>< / button>< p id =member-fullName>< / p> 
< / div ; 
   
 
 
 
 样式： 
  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; / *消除图像周围的任何意外边距* / 
 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; } 
  
 UPDATE：
 
 
 
 style in there：
 ＃member-name 
 {
 margin：30px 0px 0px 0px; 
 height：30px; 
 font-weight：bold; 
 color：white; 
 padding：1px 1px 0px 1px; 
 background-color：＃d28105; 
 border：1px solid darkgray; 
} 
 
 
＃member-fullName {margin：0px 0px 0px 20px;} 
＃member-fullName p {display：inline; float：left; overflow： hidden;} 
  
 
 
解决方案
作为按钮元素的背景？
  #btnExpandSection {
 background：#ffffff url（'/ Content / Images /plus.jpg'）no-repeat center center; 
 height：/ * image height * /; 
 width：/ * image width * /; 
} 
  
 
Can't figure out how I"m getting this extra white space around my image:



The markup:
       <div id="member-name"  hidden="true">
            <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; }
UPDATE:

There's also this style in there:
#member-name 
{
    margin: 30px 0px 0px 0px;
    height: 30px;
    font-weight: bold;
    color: white;
    padding: 1px 1px 0px 1px;
    background-color: #d28105;
    border: 1px solid darkgray;
}


#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}

解决方案
Can't you just provide the image as a background to the button element?
#btnExpandSection {
    background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
    height: /* image height */;
    width: /* image width */;
}


                        
这篇关于图像周围的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！