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

My HTML document is not linking to my CSS stylesheet properly -

php array slice every 2th rule -

node.js - Sending sockets to client side, Error: Converting circular structure to JSON -