html - unneccessary space between parent div and image thats inside of it -


html code

<head>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>   <title>abc</title>  </head> <body> <div class="wrapper">      <div class="box"><img src="images/roundlogo.jpg" alt=""></div> </div>  </body> </html> 

css code

img{ border:0px; border-image-width:0px; border-image-slice:0px;  } .box { width:250px; //border:1px solid; height:auto; border-image-slice:0px; border-image-width:0px; border-image-outset:0px; }  .box img { width:100%; //border:1px solid green; margin-top:0px; } 

i write code shown upper when checking browser there 4px space between image , parent div() called box

here work in jsfiddle http://jsfiddle.net/2rqmu/547/ can inspect iframe result shown shows space http://jsfiddle.net/2rqmu/548/

the img inline element. remove space either make block element or give vertical alignment other baseline.


Comments

Popular posts from this blog

c++ - How to add Crypto++ library to Qt project -

jQuery Mobile app not scrolling in Firefox -

How to use vim as editor in Matlab GUI -