I'm not so good at CSS design, but I'm just working on a content display layout for a website. I basically wanna make a thin line by putting an image inside a container div. and set all dimension properties as below.\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style> #thinLineWrap{ width: 510px; height: 3px; background-color: #000000; } #thinLineWrap img{ width: 170px; height: 3px; background-color: #000000; margin-top: 0px; float:left } </style></head><body> <div id="thinLineWrap"> <img src="http://stackoverflow.com/questions/13780929/images/thin_line.gif" border="0"> </div></body></html>\[/code\]But when viewing the output in Chrome inspect, the output result couldn't seem to have the specified sizes as expected, as illustrated in the snapshot below.
You might also notice that my image width and height became 171px and 4px respectively, unlike what it was set in the stylesheet section.Any possible mistake I might have done? Why did the image element become 1 pixel bigger than it should be?any advice would be very appreciated.EDIT:A copy of the original problematic thin line image is here. Not sure if there could be anything wrong with the image itself.https://lh5.googleusercontent.com/-kDRsR493dZU/UMOXRBbty9I/AAAAAAAAAh8/g58GnqQZ3pk/s128/thin_line.gif